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

資訊專欄INFORMATION COLUMN

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

chinafgj / 516人閱讀

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

執(zhí)行命令npm start在瀏覽器中可以看到如下效果：

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

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

相關(guān)文章

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

    摘要：實現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態(tài)創(chuàng)建以上兩個組件，并實現(xiàn)位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ngConten...

    asce1885 評論0 收藏0

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

    摘要：實現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態(tài)創(chuàng)建以上兩個組件，并實現(xiàn)位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ngConten...

    OnlyMyRailgun 評論0 收藏0

  • angular6.x中ngTemplateOutlet指令的使用

    摘要：在使用進行開發(fā)的時候通過屬性綁定向組件內(nèi)部傳值的方式有時候并不能完全滿足需求比如我們寫了一個公共組件但是某個模板使用這個公共組件的時候需要在其內(nèi)部添加一些標(biāo)簽內(nèi)容這種情況下除了使用預(yù)先在組件內(nèi)部定義之外就可以利用指令向組件傳入內(nèi)容指令類似于 在使用angular進行開發(fā)的時候,通過屬性綁定向組件內(nèi)部傳值的方式,有時候并不能完全滿足需求,比如我們寫了一個公共組件,但是某個模板使用這個公共...

    suxier 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<