Angular 使用 CLI 创建组件提供封装：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

添加导入

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

但是你要知道ViewEncapsulation.Emulated是默认的，最好用emulated。 ViewEncapsulation.Native 不适用于所有浏览器

Answer 2

当前 CLI 正在生成一个未解决的问题 ViewEncapsulation.None。正在此处跟踪：https://github.com/angular/angular-cli/issues/8398

还有一个修复此错误的 PR，在此处跟踪：https://github.com/angular/devkit/pull/270

目前，您有两个选择。

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

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.

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

Angular creating component with CLI gives encapsulation: ViewEncapsulation.None

angular-cli

angular

angular5