angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換

asce1885 發(fā)布于2019-08-26 13:23 / 2075人閱讀

摘要：實現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態(tài)創(chuàng)建以上兩個組件，并實現(xiàn)位置交換功能。

這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

ngContentOutlet指令介紹

ngContentOutlet指令與ngTemplateOutlet指令類似，都用于動態(tài)組件，不同的是，前者傳入的是一個Component，后者傳入的是一個TemplateRef。

首先看一下使用：

其中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: ``,
 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: `
 {{textName}}
 
 `,
 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: `
 
  
 
 

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

GPU云服務器云服務器 php數(shù)組位置交換 java實現(xiàn)位置查詢 php實現(xiàn)地理位置利用webrtc實現(xiàn)雙碼流

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108742.html

發(fā)表評論

登陸后可評論

0條評論

asce1885

男|高級講師

我要關(guān)注我要私信

TA的文章

攜程一面：分布式配置系統(tǒng)Apollo如何實時更新配置的?

閱讀 2367·2021-11-22 14:56
Will it finally: 關(guān)于 try/catch 的一些細節(jié)

閱讀 1175·2019-08-30 15:55
前端框架Vue（9）——vue 中如何對公共css、 js 方法進行單文件統(tǒng)一管理，全局調(diào)用

閱讀 3206·2019-08-29 13:29
使用 hooks 和 connect 訪問同一個 store

閱讀 1354·2019-08-26 13:56
拖拽參考線及吸附工具react-dragline

閱讀 3484·2019-08-26 13:37
My Javascript Snippets

閱讀 558·2019-08-26 13:33
JS的類型復盤

閱讀 3349·2019-08-26 13:33
JS基礎(chǔ)——call、bind、apply 和 this

閱讀 2228·2019-08-26 13:33

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換

相關(guān)文章