web-dev-qa-db-fra.com

angular 2 inclure des modèles HTML

in angular 2 J'ai besoin de créer un grand template html avec des parties redondantes. Par conséquent, je veux créer plusieurs templates html et les rassembler en les incluant dans le fichier html principal (comme ng -include dans angular1)

Mais comment puis-je inclure des sous-modèles dans le modèle principal?

exemple:

<!-- test.html -->

<div>
    this is my Sub-Item
    <!-- include sub1.html here-->
</div>
<div>
    this is second Sub-Item
    <!-- include sub2.html here-->
</div>

-

<!-- sub1.html -->
<div>
    <button>I'am sub1</button>
</div>

-

<!-- sub2.html -->
<div>
    <div>I'am sub2</div>
</div>
htmlangular
20
Tobias Koller

Vous pouvez créer des composants tels que sub1, sub2, etc. Et sur ces composants enfants, ajoutez ces fichiers HTML en tant que modèle.

Sur le code HTML principal, appelez les sélecteurs de composants. Ça va marcher

15
Aswin KV

Permettez-moi de vous dire d’abord que ng-include de Angular1.x n'est pas supporté par Angular2, donc $Compile n'est pas présent dans Angular2. Donc, vous pouvez continuer avec CRF-ComponentFactoryResolver comme indiqué ici pour ajouter du HTML dynamiquement avec angular context .

DEMO CFR) : --- (https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb? p = aperç

Si votre texte HTML a un contexte angular, vous devez utiliser CFR-ComponentFactoryResolver.

Comme dans sub1.html, vous avez button, vous pouvez cliquer dessus et déclencher son événement click. Ceci peut être réalisé avec CFR comme indiqué ci-dessous,

Vous pouvez faire beaucoup avec CRF. C'est probablement l'exemple le plus simple.

@Component({
  selector: 'my-app',
  template: `

     <button (click)="addComponents()">Add HTML (dynamically using CRF)</button>

     <h1>Angular2 AppComponent</h1>
     <hr>

     <div>
     <h5>sub1.html goes here</h5>
      <div class="container">
        <template #subContainer1></template>
      </div>
     </div>

     <hr>
     <h5>sub2.html goes here</h5>
     <div class="container">
        <template #subContainer2></template>
     </div>
  `,

})
export class App {
    name:string;
    @ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;
    @ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef;
    constructor(
      private compFactoryResolver: ComponentFactoryResolver
      ) {
      this.name = 'Angular2'
    }

    addComponents() {

      let compFactory: ComponentFactory;

      compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
      this.subContainer1.createComponent(compFactory);


      compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component);
      this.subContainer2.createComponent(compFactory);
    }
  }
}
2
micronyks