带CLI的角度创建组件提供封装:ViewEncapsulation.None
学习angular5。当我使用的角度CLI来创建新的组件,我得到了下面的代码:带CLI的角度创建组件提供封装:ViewEncapsulation.None
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
来修复该错误。然而,有没有办法不把这行代码放在第一位?
附加进口
import {ViewEncapsulation} from '@angular/core';
,但你要知道,ViewEncapsulation.Emulated是默认的,这是更好地使用模拟。 ViewEncapsulation.Native不适用于所有浏览器
这不回答这个问题。 @ delasteve的答案确实如此。 –
目前存在一个未解决的问题,CLI正在生成ViewEncapsulation.None
。这是正在这里追踪:https://github.com/angular/angular-cli/issues/8398
还有就是要修复这个bug以及公关,这里追踪:https://github.com/angular/devkit/pull/270
现在,你有两个选择。
- 您可以删除行
encapsulation: ViewEncapsulation.None
以摆脱错误。 Angular将默认为ViewEncapsulation.Emulated
。 - 您可以保留该行,并按照Fateh提及的方式添加导入。这将使
ViewEncapsulation
设置为None
,这可能会导致其他问题,例如样式应用于您不希望应用它们的组件上。
角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。
您是从'@ angular/core'导入'ViewEncapsulation'吗? –