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

Question

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

Answer 1

您可能对LazyLoad感兴趣。

查看路由和延迟加载@NgModules或此延迟加载模块教程。

Answer 2

如果您使用的是sass，则可以直接从其包中导入任何css文件，例如在example.component.scss文件中添加此文件

@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';