您好,登錄后才能下訂單哦!
ngContentOutlet指令介紹
ngContentOutlet指令與ngTemplateOutlet指令類似,都用于動(dòng)態(tài)組件,不同的是,前者傳入的是一個(gè)Component,后者傳入的是一個(gè)TemplateRef。
首先看一下使用:
<ng-container *ngComponentOutlet="MyComponent"></ng-container>
其中MyComponent是我們自定義的組件,該指令會(huì)自動(dòng)創(chuàng)建組件工廠,并在ng-container中創(chuàng)建視圖。
實(shí)現(xiàn)組件位置交換
angular中視圖是和數(shù)據(jù)綁定的,它并不推薦我們直接操作HTML DOM元素,而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。
首先定義兩個(gè)組件:
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() { } }
我們?cè)谙旅娴拇a中,動(dòng)態(tài)創(chuàng)建以上兩個(gè)組件,并實(shí)現(xiàn)位置交換功能。
動(dòng)態(tài)創(chuàng)建組件,并實(shí)現(xiàn)位置交換
我們先創(chuàng)建一個(gè)數(shù)組,用于存放上文創(chuàng)建的兩個(gè)組件ButtonComponent和TextComponent,位置交換時(shí),只需要調(diào)換組件在數(shù)組中的位置即可,代碼如下:
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; } }
執(zhí)行命令npm start在瀏覽器中可以看到如下效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。