這篇文章主要介紹了angular6 利用 ngContentOutlet 實現元件位置交換(重排),小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
ngContentOutlet指令介紹
ngContentOutlet指令與ngTemplateOutlet指令類似,都用於動態元件,不同的是,前者傳入的是一個Component,後者傳入的是一個TemplateRef。
首先看一下使用:
其中MyComponent是我們自定義的元件,該指令會自動建立元件工廠,並在ng-container中建立檢視。
實現元件位置交換
angular中檢視是和資料繫結的,它並不推薦我們直接操作HTML DOM元素,而且推薦我們通過運算元據的方式來改變元件檢視。
首先定義兩個元件:
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() {
}
}
我們在下面的程式碼中,動態建立以上兩個元件,並實現位置交換功能。
動態建立元件,並實現位置交換
我們先建立一個陣列,用於存放上文建立的兩個元件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;
}
}