_ngcontent-c# 在 Angular 中是什么意思？答案

【问题标题】：What does _ngcontent-c# mean in Angular?_ngcontent-c# 在 Angular 中是什么意思？
【发布时间】：2017-07-13 13:30:29
【问题描述】：

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

这个c值是什么意思？

【问题讨论】：

标签： javascript angular

【解决方案1】：

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

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

ComponenB
<h1></h1>

Angular 会将组件A 内所有样式的元素标记为_ngcontent-c0，并将组件B 内所有样式的元素标记为_ngcontent-c1：

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

【讨论】：

所以根组件为 0，嵌套组件为 1...n？
不确定我喜欢或想要/需要这个_ngcontent..我如何关闭它？
@TomStickel，你在用什么view encapsulation？如果你使用 Native 或 None，Angular 不应该添加这些属性
@TomStickel，ViewEncapsulation.Emulated 是默认模式。它在组件装饰器描述符属性中指定
一切都很好，但是 _ngcontent-c# 有什么作用呢？

【解决方案2】：

您可以通过将以下导入添加到您的组件来禁用它，

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

不添加角度的动态属性

【讨论】：