angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)
ngContentOutlet指令介紹
ngContentOutlet指令與ngTemplateOutlet指令類似,都用于動態(tài)組件,不同的是,前者傳入的是一個Component,后者傳入的是一個TemplateRef。
首先看一下使用:
<ng-container *ngComponentOutlet="MyComponent"></ng-container>
其中MyComponent是我們自定義的組件,該指令會自動創(chuàng)建組件工廠,并在ng-container中創(chuàng)建視圖。
實現(xiàn)組件位置交換
angular中視圖是和數(shù)據(jù)綁定的,它并不推薦我們直接操作HTML DOM元素,而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。
首先定義兩個組件:
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() { } }
我們在下面的代碼中,動態(tài)創(chuàng)建以上兩個組件,并實現(xiàn)位置交換功能。
動態(tài)創(chuàng)建組件,并實現(xiàn)位置交換
我們先創(chuàng)建一個數(shù)組,用于存放上文創(chuàng)建的兩個組件ButtonComponent和TextComponent,位置交換時,只需要調(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在瀏覽器中可以看到如下效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular引入swiper后autoplay失效的解決辦法詳解
這篇文章主要介紹了Angular引入swiper后autoplay失效的解決辦法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09AngularJS+Bootstrap3多級導(dǎo)航菜單的實現(xiàn)代碼
將介紹如何用AngularJS構(gòu)建一個強大的web前端系統(tǒng)。文章介紹如何實現(xiàn)多限級導(dǎo)航菜單。本文圖文并茂給大家介紹的非常詳細(xì),感興趣的朋友參考下吧2017-08-08Angular中實現(xiàn)樹形結(jié)構(gòu)視圖實例代碼
近兩年當(dāng)中使用Angular開發(fā)過很多項目,其中也涉及到一些樹形結(jié)構(gòu)視圖的顯示,最近的在項目中封裝了大量的組件,一些組件也有樹形結(jié)構(gòu)的展示,所以寫出來總結(jié)一下。2017-05-05