我很难理解encapsulation: ViewEncapsulation.None中的@Component。
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
encapsulation: ViewEncapsulation.None
})
在我的home.page.scss中，如果我设置了样式：
.responsive {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
width: 100%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
然后我从具有动态HTML的API引入HTML，例如：
<div class="responsive"><iframe src="https://foo/bar"></iframe></div>
该代码将使其正常工作，但是如果我从encapsulation: ViewEncapsulation.None中删除@Component，则不会呈现HTML和CSS。
这是home.page.html模板的代码：
<div [innerHTML]="content"></div>
这是home.page.ts的代码：
import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
encapsulation: ViewEncapsulation.None
})
export class HomePage implements OnInit {
content: SafeHtml;
constructor(private sanitized: DomSanitizer) { }
ngOnInit() {
//res.content comes from a service
this.content = this.sanitized.bypassSecurityTrustHtml(res.content);
}
}
有人可以帮忙解释发生了什么，为什么没有封装就无法呈现动态HTML？
[共有3种ViewEncapsulation策略：
仿真（默认）：无阴影DOM，每个组件封装的样式（父组件，子组件将具有其“隔离”的样式），就像您在组件树中向每个组件添加了<style>...</style>并确保它们没有溢出
本机：使用Shadow DOM，将样式封装到创建的Shadow DOM（在“父级”级别，父样式将影响子级），就像您将<style>...</style>添加到Shadow DOM的根目录中一样>]
无：没有Shadow DOM，没有样式封装（样式适用于所有对象），就像您将样式添加到<head><style>...</style></head>
现在您的情况如何：
[当您使用ViewEncapsulation.None时-home.page.scss中的样式在整个DOM上都可用，并且一旦您将（向内HTML并不是最好的方式...）添加到主页的DOM树中，这些样式应用，您会看到iFrame等呈现]
[切换到ViewEncapsulation.Emulated（默认）时，home.page.scss的样式不会影响要添加的子元素（样式被“封装”），并且未应用任何样式，并且看不到任何渲染
如果尝试使用ViewEncapsulation.Native-样式将在Shadow DOM根级别可用（支持Shadow DOM，因此样式仍应可用于