Que signifie _ngcontent-c# dans Angular ?

Question

Je suis en train d'apprendre Angular 2/4 et je vois les balises html avec les attributs générés par ng : _ngcontent-c0, _ngcontent-c1...

Que signifie cette valeur c ?

Answer 1

_ngcontent-c# sont ajoutés lorsque vous utilisez ViewEncapsulation.Emulated - qui est par défaut. Angular utilise ces attributs pour cibler des éléments spécifiques avec les styles. Le nombre c est une sorte d'identifiant unique du composant hôte. Par exemple, si vous avez deux composants avec les modèles suivants :

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

ComponenB
<h1></h1>

Angular marquera tous les éléments avec des styles à l'intérieur du composant. A comme _ngcontent-c0 et tous les éléments avec des styles à l'intérieur du composant B avec _ngcontent-c1 :

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

Answer 2

Vous pouvez le désactiver en ajoutant l'import ci-dessous à votre composant,

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() {
  }

}

veuillez noter cette ligne :

 encapsulation: ViewEncapsulation.None

ne pas ajouter d'attribut dynamique à partir d'angular