_ngcontent-c#在Angular中意味着什么？

Question

我正在学习Angular 2/4,我看到带有ng生成属性的html标签: _ngcontent-c0, _ngcontent-c1...

这个c值是什么意思？

Answer 1

_ngcontent-c#使用时添加属性ViewEncapsulation.Emulated- 这是默认值.Angular使用这些属性来定位具有样式的特定元素.该数字c是主机组件的唯一标识符.例如,如果您有两个具有以下模板的组件:

ComponentA
<span></span>
<comp-b></comp-b>

ComponenB
<h1></h1>

角将迎来与内部组件样式的所有元素A的_ngcontent-c0和与内部组件样式的所有元素B有_ngcontent-c1:

<comp-a>
    <span _ngcontent-c0></span>
    <comp-b _ngcontent-c0>
        <h1 _ngcontent-c1></h1>
    </comp-b>
</comp-a>

Answer 2

您可以通过在组件下面添加import来禁用它，

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

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

请注意这一行：

 encapsulation: ViewEncapsulation.None

不从角度添加动态属性