使用CLI的Angular创建组件提供封装：ViewEncapsulation.None

Question

学习angular5。当我使用Angular的CLI创建新组件时，我得到以下代码：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  } 
}

但是encapsulation: ViewEncapsulation.None使代码中断并输出以下错误消息：

我知道如何通过删除encapsulation: ViewEncapsulation.None来修复错误。然而，有没有办法在第一时间没有这行代码？

Answer 1

目前，CLI正在生成ViewEncapsulation.None这是一个突出问题。这是在这里跟踪：https://github.com/angular/angular-cli/issues/8398

还有一个公关来修复此错误，在此处进行跟踪：https://github.com/angular/devkit/pull/270

目前，您有两种选择。

1. 您可以删除行encapsulation: ViewEncapsulation.None以消除错误。 Angular默认为ViewEncapsulation.Emulated。
2. 您可以保留该行，并按照Fateh提及并添加导入。这会将ViewEncapsulation设置为None，这可能会导致其他问题，例如样式应用于您不希望将其应用到的组件。

Answer 2

添加导入

import {ViewEncapsulation} from '@angular/core';

但你必须知道ViewEncapsulation.Emulated是默认值，最好使用模拟。 ViewEncapsulation.Native不适用于所有浏览器

Answer 3

Angular CLI版本1.5.3

ng g component test

此版本的angular cli生成以下代码：

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

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

  constructor() { }

  ngOnInit() {
  }

}

这意味着封装模式默认为ViewEncapsulation.Emulated。