javascript - Angular 2 添加样式(css，js)

Question

我有一个从 angular 1 遗留下来的 web 样式，其中包括 sass 和 js 库(jquery、bootstrap、animo 等...)的 bundle ，是否可以将它们集成到 angular 2 中？如果是这样，那又如何呢？我尝试将它们包含到 index.html 中，没有错误，也没有样式。我知道组件是 View 封装的。你只是将它们添加到 index.html 中的 systemjs 和 css 中吗？

Answer 1

是的，您可以查看下面的示例代码，它确实可以做到这一点。您会感兴趣的是这些代码行:

styles: [
   require('./app.component.scss')
],
encapsulation: ViewEncapsulation.None,

第一行导入 sass 文件，而另一行允许 angular2 将样式全局应用到整个 angular2 应用程序。

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

import { 
  ROUTER_DIRECTIVES, 
} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'ch',
  templateUrl: 'app.component.html',
  styles: [
   require('./app.component.scss')
  ],
  encapsulation: ViewEncapsulation.None,
  directives: [
    ROUTER_DIRECTIVES,
  ],
  providers: [
  ]
  })

  export class AppComponent{

  }

对于 JS 库，最好的策略是使用 npm install {yourlibs} --save 将它们包含进来，然后将它们添加到 systemjs 构建配置文件中。查看此网址以获取有关如何进行操作的更多信息 https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project