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

資訊專欄INFORMATION COLUMN

angular6.x中ngTemplateOutlet指令的使用

suxier / 3098人閱讀

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

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

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

ngTemplateOutlet是結(jié)構(gòu)型指令,需要綁定一個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

傳遞進(jìn)去的內(nèi)容組件:app-nested-component

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

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

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

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

 @ViewChild("temp") temp: TemplateRef

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

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

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

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

相關(guān)文章

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

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

    wind5o 評論0 收藏0

  • 初探Angular6.x---用戶列表與用戶詳情

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

    helloworldcoding 評論0 收藏0

  • 初探Angular6.x---主從組件

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

    FingerLiu 評論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 評論0 收藏0

  • angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境

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

    seasonley 評論0 收藏0

發(fā)表評論

0條評論

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