angular6 は ngContentOutlet を使用してコンポーネントの位置交換を実装する方法 (コード例)

この記事の内容は、angular6 が ngContentOutlet を使用してコンポーネントの位置交換を実装する方法に関するものです (コード例)。必要な方は参考にしていただければ幸いです。

ngContentOutlet ディレクティブの概要

ngContentOutlet ディレクティブは ngTemplateOutlet ディレクティブに似ており、どちらも動的コンポーネントに使用されます。違いは、前者はコンポーネントを渡し、後者はコンポーネントを渡すことです。 TemplateRef 内。

最初に使用法を見てみましょう:

MyComponent はカスタム コンポーネントです。この命令により、コンポーネント ファクトリが自動的に作成され、ng-container にビューが作成されます。

コンポーネントの位置交換を実現する

Angular のビューはデータにバインドされており、HTML DOM 要素を直接操作することは推奨されません。データを操作してコンポーネント ビューを変更することをお勧めします。

最初に 2 つのコンポーネントを定義します。

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

上記の 2 つのコンポーネントを動的に作成して実装します。位置交換機能。

コンポーネントを動的に作成して位置交換を実装する

まず、上で作成した 2 つのコンポーネント ButtonComponent と TextComponent を格納する配列を作成します。位置を交換する場合は、配列内のコンポーネントを交換するだけです。の位置、コードは次のとおりです:

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

以上がangular6 は ngContentOutlet を使用してコンポーネントの位置交換を実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。