Question

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

Answer 1

您可能对LazyLoad感兴趣。

查看Routing and Lazy loading @NgModules或此Lazy Loading a Module教程。

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

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

3 个答案: