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

Question

学习角度5。当我使用 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

也有一个 PR 来修复这个错误，在这里跟踪：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是默认的，最好用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。