用CLI创建角组件给出封装: ViewEncapsulation.None

Question

学习angular5。当我使用CLI (角的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来修复这个bug。但是，是否有一种方法可以从一开始就不使用这一行代码？

Answer 1

添加导入

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

但是您必须知道ViewEncapsulation.Emulated是默认的，最好使用模拟。ViewEncapsulation.Native不会在所有浏览器上工作。

Answer 2

目前有一个悬而未决的问题，即CLI正在生成ViewEncapsulation.None。这里正在跟踪这个问题：https://github.com/angular/angular-cli/issues/8398

还有一个PR来修复这个bug，在这里跟踪：https://github.com/angular/devkit/pull/270

现在，你有两个选择。

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

Answer 3

角CLI版本1.5.3

ng g component test

此版本的角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。