加载一个组件的外部JS和CSS

Question

我有一个Angular 4应用程序，我只用一个组件的js和css文件。我看到的所有文档都建议将这些文件放在Index.html中，但我不想在每条路径上加载它们，只是将它们用于组件。这些文件与其他捆绑的js坐在dist文件夹中，并通过webpack从另一个文件夹复制。

Answer 1

您可能感兴趣LazyLoad。

检出Routing and Lazy loading @NgModules或这Lazy Loading a Module教程。

Answer 2

如果您使用的青菜，那么你可以直接从它的包装 例如，在example.component.scss文件导入任何CSS文件添加此

@import '~bootstrap/dist/css/bootstrap.min.css'; 

Answer 3

对于JS文件，你必须实现AfterViewInit生命周期挂钩，并在这里导入您的文件，例如：

test.component.ts

import { Component, AfterViewInit } from '@angular/core'; 

@Component({ 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent implements AfterViewInit { 

    public ngAfterViewInit() { 
    require('path/to/your/script.js'); 
    } 
} 

和CSS文件，将它们导入您的SCSS文件，喜欢这里：

test.component.scss

@import '~path/to/your/external/style.min.css';