angular6.x中ngTemplateOutlet指令的使用

suxier 發布于2019-08-23 10:52 / 3093人閱讀

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

在使用angular進行開發的時候,通過屬性綁定向組件內部傳值的方式,有時候并不能完全滿足需求,比如我們寫了一個公共組件,但是某個模板使用這個公共組件的時候,需要在其內部添加一些標簽內容,這種情況下,除了使用ngIf/ngSwitch預先在組件內部定義之外,就可以利用ngTemplateOutlet指令向組件傳入內容.

ngTemplateOutlet指令類似于angularjs中的ng-transclude,vuejs中的slot.

ngTemplateOutlet是結構型指令,需要綁定一個TemplateRef類型的實例.

使用方式如下:

@Component({
  selector: "app",
  template: `
    Angular"s template outlet and lifecycle example
    
    
      Hello {{name}}!
      
    
  `,
})
export class App {}
@Component({
  selector: "app-content",
  template: `
    
    
  `,
})
export class Content {
  display = false;
  @Input() templateRef: TemplateRef;
  myContext = {$implicit: "World", localSk: "Svet"};
}
@Component({
  selector: "app-nested-component",
  template: `
    Hello World!
  `,
})
export class NestedComponent implements OnDestroy, OnInit {
  
  ngOnInit() {
    alert("app-nested-component initialized!");
  }
  
  ngOnDestroy() {
    alert("app-nested-component destroyed!");
  }
  
}

代碼中除了根組件外定義了兩個組件

容器組件:app-content

傳遞進去的內容組件:app-nested-component

app-content組件接收一個TemplateRef類型的輸入屬性templateRef,并在模板中將其綁定到了ngTemplateOutlet指令,當組件接收到templateRef屬性時,就會將其渲染到ngTemplateOutlet指令所在的位置.

上例中,app-content組件templateRef屬性的來源,是在根組件的模板內,直接通過#符號獲取到了app-nested-component組件所在的引用并傳入的.

在實際應用中,除了這種方式,也可以直接在組件內部獲取TemplateRef類型的屬性并綁定到ngTemplateOutlet指令.

比如在容器組件為模態框的情況下,并不能通過模板傳值,就可以使用下面這種方式:

 @ViewChild("temp") temp: TemplateRef

 openDialog(){
   this.dialog.open(ViewDialogComponent, {data: this.temp)
 }

在容器組件中還可以定義被傳遞內容的上下文(上例app-content組件中的myContext屬性),其中的$implicit屬性作為默認值,在被傳遞的內容中可以以重命名的方式訪問(上例let-name),對于上下文中其他的屬性,就需要通過let-屬性名的方式訪問了.

GPU云服務器云服務器 linux中的使用指令使用方法 ios中sqlite的使用 java中二維數組的使用

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

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

[譯] 探索 Angular 使用 ViewContainerRef 操作 DOM

摘要：在探索抽象類前，先了解下如何在組件指令中獲取這些抽象類。下面示例描述在組建模板中如何創建如同其他抽象類一樣，通過屬性綁定元素，比如上例中，綁定的是會被渲染為注釋的元素，所以輸出也將是。你可以使用查詢模板引用變量來獲得抽象類。原文鏈接：Exploring Angular DOM manipulation techniques using ViewContainerRef如果想深入學習 ...

wind5o 2019-08-22 15:33 評論0 收藏0
初探Angular6.x---用戶列表與用戶詳情

摘要：初探用戶列表與用戶詳情在上一篇博文進入用戶編輯中我們分享了屬性名稱和這兩個表達式的運用我們已經可以將表單里的修改與我們展示出來的值進行同步今天我們來學習在中如何展示一個列表在項目里列表展示可以說是非常普遍的一個需求了幾乎有展示數　　初探Angular6.x---用戶列表與用戶詳情　　在上一篇博文《Angular6.x---進入用戶編輯》中,我們分享了{{屬性名稱}}和[(ngMod...

helloworldcoding 2019-08-19 10:59 評論0 收藏0
初探Angular6.x---主從組件

摘要：在上一篇博文用戶列表與詳情展示中我們用實現了用戶列表的展示并通過語法實現了列表單擊時將單擊的對象傳到后臺的功能最后為了防止初次加載對象為空導致的錯誤我們又使用了語法來對要展示的詳情對象進行判空操作但隨著后續模塊的增多以及業務的交叉我們　　　在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=let object of list實現了用戶列表的展示,并通過...

FingerLiu 2019-08-19 11:06 評論0 收藏0
angular(angular6/angular7/angular8) delete請求body的問

摘要：中請求，不接受，只需將其放在對象中即可在，，及以上版本中修改如下在中修改如下這樣請求就可以攜帶 angular中httpclient delete請求，不接受body，只需將其放在options對象中即可在 angular6.x ，angular7.x， angular8.x及以上版本中修改如下: const options = { headers: new HttpHeader...

gggggggbong 2019-08-26 10:49 評論0 收藏0
angular6根據environments配置文件更改開發所需要的環境

摘要：前端開發過程中，我們常常需要根據需求去運行或者打包不同環境的代碼，幸運的是，給我們提供了配置，但是的配置方式和的其他版本的配置方式是有所不同的，下面我就分別介紹在測試預生產環境下實現配置。前端開發過程中，我們常常需要根據需求去運行或者打包不同環境的代碼，幸運的是，angular給我們提供了environments配置，但是angular6.x的配置方式和angular的其他版本的配置...

seasonley 2019-08-23 15:39 評論0 收藏0