Comment angulaire6 utilise-t-il ngContentOutlet pour implémenter l'échange de position de composant (exemple de code)

Le contenu de cet article explique comment angulaire6 utilise ngContentOutlet pour implémenter l'échange de position de composant (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Introduction à la directive ngContentOutlet

La directive ngContentOutlet est similaire à la directive ngTemplateOutlet, et les deux sont utilisées pour les composants dynamiques. La différence est que la première passe dans un composant et la seconde passe. dans un TemplateRef.

Regardez d'abord l'utilisation :

où MyComponent est notre composant personnalisé. Cette instruction créera automatiquement une fabrique de composants et créera une vue dans ng-container.

Réaliser l'échange de position des composants

Les vues angulaires sont liées aux données. Il ne nous est pas recommandé d'utiliser directement les éléments HTML DOM et nous recommande de modifier les vues des composants en manipulant les données.

Définissez d'abord deux composants :

button.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-button',
 template: `<button>按钮</button>`,
 styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
 constructor() { }
 ngOnInit() {

text.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
 selector: 'app-text',
 template: `
 <label for="">{{textName}}</label>
 <input type="text">
 `,
 styleUrls: ['./text.component.css']
})
export class TextComponent implements OnInit {
 @Input() public textName = 'null';
 constructor() { }
 ngOnInit() {
 }
}

Nous sommes en dessous Dans le code, les deux composants ci-dessus sont créés dynamiquement et la fonction d'échange de position est implémentée.

Créer dynamiquement des composants et implémenter l'échange de positions

Nous créons d'abord un tableau pour stocker les deux composants ButtonComponent et TextComponent créés ci-dessus. Lors de l'échange de positions, échangez simplement les composants dans le tableau. Le code est le même. suit :

import { TextComponent } from './text/text.component';
import { ButtonComponent } from './button/button.component';
import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 template: `
 <ng-container *ngFor="let item of componentArr" >
  <ng-container *ngComponentOutlet="item"></ng-container>
 </ng-container>
 <br>
 <button (click)="swap()">swap</button>
`,
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 public componentArr = [TextComponent, ButtonComponent];
 constructor() {
 }
 public swap() {
  const temp = this.componentArr[0];
  this.componentArr[0] = this.componentArr[1];
  this.componentArr[1] = temp;
 }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!