Wie verwendet angle6 ngContentOutlet, um den Komponentenpositionsaustausch zu implementieren (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von ngContentOutlet zum Implementieren des Komponentenpositionsaustauschs (Codebeispiel). Ich hoffe, dass er für Sie hilfreich ist.

Einführung in die ngContentOutlet-Direktive

Die ngContentOutlet-Direktive ähnelt der ngTemplateOutlet-Direktive, beide werden für dynamische Komponenten verwendet, der Unterschied besteht darin, dass erstere eine Komponente übergibt und letztere übergibt eine TemplateRef.

Erster Blick auf die Verwendung:

wobei MyComponent unsere benutzerdefinierte Komponente ist. Diese Anweisung erstellt automatisch eine Komponentenfabrik und eine Ansicht im NG-Container.

Komponentenpositionsaustausch realisieren

Angularansichten sind an Daten gebunden. Es wird nicht empfohlen, HTML-DOM-Elemente direkt zu bedienen, und es wird empfohlen, Komponentenansichten durch Bearbeiten von Daten zu ändern.

Definieren Sie zunächst zwei Komponenten:

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

Im folgenden Code erstellen wir dynamisch die Die beiden oben genannten Komponenten implementieren die Positionsaustauschfunktion.

Komponenten dynamisch erstellen und Positionsaustausch implementieren

Wir erstellen zunächst ein Array, um die beiden oben erstellten Komponenten ButtonComponent und TextComponent zu speichern. Wenn Sie Positionen austauschen, tauschen Sie einfach die Komponenten im Array aus. Der Code lautet wie folgt folgt:

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;
 }
}

Das obige ist der detaillierte Inhalt vonWie verwendet angle6 ngContentOutlet, um den Komponentenpositionsaustausch zu implementieren (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!