成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

angular6.x中ngTemplateOutlet指令的使用

suxier / 3132人閱讀

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

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

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

ngTemplateOutlet是結(jié)構(gòu)型指令,需要綁定一個(gè)TemplateRef類型的實(shí)例.

使用方式如下:

@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!");
  }
  
}

代碼中除了根組件外定義了兩個(gè)組件

容器組件:app-content

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

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

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

在實(shí)際應(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),對(duì)于上下文中其他的屬性,就需要通過let-屬性名的方式訪問了.

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96774.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

  • angular(angular6/angular7/angular8) delete請(qǐng)求body的問

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<