成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

理解Angular2中的ViewContainerRef

Codeing_ls / 1899人閱讀

摘要：注意本文不是關(guān)于如何用編程的方式來(lái)創(chuàng)建組件的文章。在這個(gè)例子中，容器元素就是元素，模版將作為這個(gè)元素的兄弟節(jié)點(diǎn)被插入。用來(lái)演示以組件自身作為視圖容器，將組件中的模版插入視圖容器的效果。

原文鏈接：https://netbasal.com/angular-...
作者：Netanel Basal
譯者：而井


譯者注：雖然文章標(biāo)題寫(xiě)的是Angular2，但其實(shí)泛指的是Angular2+，讀者可以將其運(yùn)用到最新的Angular版本中。

如果你曾經(jīng)需要用編程的方式來(lái)插入新的組件或模版，你可能已經(jīng)用過(guò)了ViewContainerRef服務(wù)了。

在閱讀了（許多）文章和問(wèn)題后，我發(fā)現(xiàn)了許多（人）對(duì)于ViewContainerRef的疑惑，所以讓我試著向你解釋什么是ViewContainerRef。

注意：本文不是關(guān)于如何用編程的方式來(lái)創(chuàng)建組件的（文章）。（譯者注：只是為了闡述什么是ViewContainerRef）

讓我們回歸到純JavaScript上來(lái)開(kāi)始（教程）。根據(jù)下面的標(biāo)記，你的任務(wù)是添加一個(gè)新段落來(lái)作為當(dāng)前（節(jié)點(diǎn)）的一個(gè)兄弟（節(jié)點(diǎn)）。

Element one

為了簡(jiǎn)化（操作），讓我們使用JQuery:

$("
Element two
").insertAfter(".one");

當(dāng)你需要添加新的DOM元素（即：組件、模版）時(shí)，你需要一個(gè)可以插入這個(gè)元素的位置。

Angular也沒(méi)有什么黑魔法。它也只是JavaScript。如果你想插入新的組件或模版，你需要告訴Angular，哪里去放置這個(gè)元素。

所以ViewContainerRef就是：

一個(gè)你可以將新的組件作為其兄弟（節(jié)點(diǎn)）的DOM元素（容器）。
（譯者注：即如果你以某個(gè)元素或組件作為視圖容器ViewContainerRef，對(duì)其新增的組件、模版，將成為這個(gè)視圖容器的兄弟節(jié)點(diǎn)）
用依賴(lài)注入來(lái)獲取ViewContainerRef 
@Component({
  selector: "vcr",
  template: `
    
  `,
})
export class VcrComponent {
  @ViewChild("tpl") tpl;
  constructor(private _vcr: ViewContainerRef) {
  }
  
  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }
}

@Component({
  selector: "my-app",
  template: `
      
  `,
})
export class App {

}

我們?cè)谶@個(gè)組件中注入了服務(wù)。在這個(gè)樣例中，容器將指向你的宿主元素（vcr 元素），并且模版將作為vcr元素的兄弟（節(jié)點(diǎn)）被插入。

用ViewChild來(lái)獲取ViewContainerRef 
@Component({
  selector: "vcr",
  template: `
    
    
Some element

    

  
  `,
})
export class VcrComponent {
  @ViewChild("container", { read: ViewContainerRef }) _vcr;
  @ViewChild("tpl") tpl;

  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }
}

@Component({
  selector: "my-app",
  template: `
    

      
    

  `,
})
export class App {

}

我們可以使用ViewChild裝飾器來(lái)收集任何我們視圖上的元素，并將其當(dāng)作ViewContainerRef。

在這個(gè)例子中，容器元素就是div元素，模版將作為這個(gè)div元素的兄弟（節(jié)點(diǎn)）被插入。

你可以將ViewContainerRef用日志輸出，來(lái)查看它的元素是什么：

你可以在這里試玩這些代碼。
好了本文到此結(jié)束。

譯者附

雖然作者已經(jīng)說(shuō)得很透徹了，但是由于動(dòng)態(tài)插入組件、模版有很多種排列組合，我（譯者）做了一些樣例代碼來(lái)輔助你理解，目前代碼已經(jīng)上傳到GitHub上了，地址是：https://github.com/RIO-LI/ang...
這個(gè)參考項(xiàng)目目前包含6的目錄，每一個(gè)都是多帶帶的Angular項(xiàng)目，每一個(gè)目錄具體演示內(nèi)容如下：

component-insert-into-component-viewcontainer: 用來(lái)演示以組件作為視圖容器ViewContainerRef，將另外一個(gè)組件插入視圖容器的效果。
component-insert-into-dom-viewcontainer: 用來(lái)演示以DOM元素為視圖容器ViewContainerRef，將一個(gè)組件插入視圖容器的效果。
component-insert-into-self-viewcontainer: 用來(lái)演示以組件自身作為視圖容器ViewContainerRef，將組件中的模版插入視圖容器的效果。
ngtemplate-insert-into-component-viewcontainer: 用來(lái)演示以一個(gè)組件作為視圖容器ViewContainerRef，將一個(gè)插入視圖容器的效果。
ngtemplate-insert-into-dom-viewcontainer: 用來(lái)演示以一個(gè)DOM元素為視圖容器ViewContainerRef，將一個(gè)插入視圖容器的效果。
ngtemplate-insert-into-ngcontainer-viewcontainer:用來(lái)演示以一個(gè)元素為視圖容器ViewContainerRef，將一個(gè)插入視圖容器的效果。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108839.html

相關(guān)文章

  • Angular4 動(dòng)態(tài)加載組件雜談

    摘要：最近接手了一個(gè)項(xiàng)目，客戶(hù)提出了一個(gè)高大上的需求要求只有一個(gè)主界面，所有組件通過(guò)來(lái)顯示。 最近接手了一個(gè)項(xiàng)目，客戶(hù)提出了一個(gè)高大上的需求：要求只有一個(gè)主界面，所有組件通過(guò)Tab來(lái)顯示。其實(shí)這個(gè)需求并不詭異，不喜歡界面跳轉(zhuǎn)的客戶(hù)都非常熱衷于這種展現(xiàn)形式。 好吧，客戶(hù)至上，搞定它！這種實(shí)現(xiàn)方式在傳統(tǒng)的HTML應(yīng)用中，非常簡(jiǎn)單，只是在這Angular4（以下簡(jiǎn)稱(chēng)ng）中，咋個(gè)弄呢？ 我們先來(lái)了...

    testHs 評(píng)論0 收藏0

  • angular1.x和angular2+并行，angular1.x 升級(jí) angular2+方案

    摘要：可以在不必打斷其它業(yè)務(wù)的前提下，升級(jí)應(yīng)用程序，因?yàn)檫@項(xiàng)工作可以多人協(xié)作完成，在一段時(shí)間內(nèi)逐漸鋪開(kāi)，下面就方案展開(kāi)說(shuō)明主要依賴(lài)提供模塊。在混合式應(yīng)用中，我們同時(shí)運(yùn)行了兩個(gè)版本的。這意味著我們至少需要和各提供一個(gè)模塊。 angular1.x 升級(jí) angular2+ 方案 我給大家提供的是angular1.x和angular5并行，增量式升級(jí)方案，這樣大家可以循序漸進(jìn)升級(jí)自己的應(yīng)用，不想看...

    Olivia 評(píng)論0 收藏0

  • 教你如何在@ViewChild查詢(xún)之前獲取ViewContainerRef

    摘要：使用指令代替查詢(xún)每一個(gè)指令都可以在它的構(gòu)造器中注入引用。讓我們聲明這樣一個(gè)指令我已經(jīng)在構(gòu)造器中添加了檢查代碼來(lái)保證視圖容器在指令實(shí)例化的時(shí)候是可用的。 原文：https://blog.angularindepth.c...作者：Max Koretskyi譯者：而井 【翻譯】教你如何在@ViewChild查詢(xún)之前獲取ViewContainerRef showImg(https://se...

    suxier 評(píng)論0 收藏0

  • Angular 2.x+ 如何動(dòng)態(tài)裝載組件

    摘要：如何動(dòng)態(tài)裝載組件在中我們可以使用方法編譯模板達(dá)到動(dòng)態(tài)加載組件的目的，然而在中則沒(méi)有那么簡(jiǎn)單，下面的例子即為動(dòng)態(tài)加載廣告組件的過(guò)程。是創(chuàng)建動(dòng)態(tài)組件較好的選擇，因?yàn)樗粫?huì)渲染多余的輸出。 Angular 2.x+ 如何動(dòng)態(tài)裝載組件 在 Angular 1.x 中我們可以使用 $compile 方法編譯模板達(dá)到動(dòng)態(tài)加載組件的目的，然而在 ng2 中則沒(méi)有那么簡(jiǎn)單，下面的例子即為動(dòng)態(tài)加載廣告組...

    Yi_Zhi_Yu 評(píng)論0 收藏0

  • [譯] 關(guān)于 Angular 動(dòng)態(tài)組件你需要知道的

    摘要：第一種方式是使用模塊加載器，如果你使用加載器的話(huà)，路由在加載子路由模塊時(shí)也是用的作為模塊加載器。還需注意的是，想要使用還需像這樣去注冊(cè)它你當(dāng)然可以在里使用任何標(biāo)識(shí)，不過(guò)路由模塊使用標(biāo)識(shí)，所以最好也使用相同。 原文鏈接：Here is what you need to know about dynamic components in?Angular showImg(https://se...

    lcodecorex 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<