理解Angular2中的ViewContainerRef

Codeing_ls 發布于2019-08-26 13:27 / 1887人閱讀

摘要：注意本文不是關于如何用編程的方式來創建組件的文章。在這個例子中，容器元素就是元素，模版將作為這個元素的兄弟節點被插入。用來演示以組件自身作為視圖容器，將組件中的模版插入視圖容器的效果。

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

譯者注：雖然文章標題寫的是Angular2，但其實泛指的是Angular2+，讀者可以將其運用到最新的Angular版本中。

如果你曾經需要用編程的方式來插入新的組件或模版，你可能已經用過了ViewContainerRef服務了。

在閱讀了（許多）文章和問題后，我發現了許多（人）對于ViewContainerRef的疑惑，所以讓我試著向你解釋什么是ViewContainerRef。

注意：本文不是關于如何用編程的方式來創建組件的（文章）。（譯者注：只是為了闡述什么是ViewContainerRef）

讓我們回歸到純JavaScript上來開始（教程）。根據下面的標記，你的任務是添加一個新段落來作為當前（節點）的一個兄弟（節點）。

Element one

為了簡化（操作），讓我們使用JQuery:

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

當你需要添加新的DOM元素（即：組件、模版）時，你需要一個可以插入這個元素的位置。

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

所以ViewContainerRef就是：

一個你可以將新的組件作為其兄弟（節點）的DOM元素（容器）。
（譯者注：即如果你以某個元素或組件作為視圖容器ViewContainerRef，對其新增的組件、模版，將成為這個視圖容器的兄弟節點）

用依賴注入來獲取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 {

}

我們在這個組件中注入了服務。在這個樣例中，容器將指向你的宿主元素（vcr 元素），并且模版將作為vcr元素的兄弟（節點）被插入。

用ViewChild來獲取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裝飾器來收集任何我們視圖上的元素，并將其當作ViewContainerRef。

在這個例子中，容器元素就是div元素，模版將作為這個div元素的兄弟（節點）被插入。

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

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

譯者附

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

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

云服務器 GPU云服務器你理解中的云服務器ecs是什么 ViewContainerRef angular2 angular2JS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108839.html

Angular4 動態加載組件雜談

摘要：最近接手了一個項目，客戶提出了一個高大上的需求要求只有一個主界面，所有組件通過來顯示。最近接手了一個項目，客戶提出了一個高大上的需求：要求只有一個主界面，所有組件通過Tab來顯示。其實這個需求并不詭異，不喜歡界面跳轉的客戶都非常熱衷于這種展現形式。好吧，客戶至上，搞定它！這種實現方式在傳統的HTML應用中，非常簡單，只是在這Angular4（以下簡稱ng）中，咋個弄呢？我們先來了...

testHs 2019-08-20 17:49 評論0 收藏0
angular1.x和angular2+并行，angular1.x 升級 angular2+方案

摘要：可以在不必打斷其它業務的前提下，升級應用程序，因為這項工作可以多人協作完成，在一段時間內逐漸鋪開，下面就方案展開說明主要依賴提供模塊。在混合式應用中，我們同時運行了兩個版本的。這意味著我們至少需要和各提供一個模塊。 angular1.x 升級 angular2+ 方案我給大家提供的是angular1.x和angular5并行，增量式升級方案，這樣大家可以循序漸進升級自己的應用，不想看...

Olivia 2019-08-26 11:36 評論0 收藏0
教你如何在@ViewChild查詢之前獲取ViewContainerRef

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

suxier 2019-08-23 14:19 評論0 收藏0
Angular 2.x+ 如何動態裝載組件

摘要：如何動態裝載組件在中我們可以使用方法編譯模板達到動態加載組件的目的，然而在中則沒有那么簡單，下面的例子即為動態加載廣告組件的過程。是創建動態組件較好的選擇，因為它不會渲染多余的輸出。 Angular 2.x+ 如何動態裝載組件在 Angular 1.x 中我們可以使用 $compile 方法編譯模板達到動態加載組件的目的，然而在 ng2 中則沒有那么簡單，下面的例子即為動態加載廣告組...

Yi_Zhi_Yu 2019-08-20 16:45 評論0 收藏0
[譯] 關于 Angular 動態組件你需要知道的

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

lcodecorex 2019-08-26 11:53 評論0 收藏0