angular6.x中ngTemplateOutlet指令的使用示例

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

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、金臺網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為金臺等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

使用方式如下:

@Component({
 selector: 'app',
 template: `
  
Angular's template outlet and lifecycle example
  
  
   Hello {{name}}!
   
  
 `,
})
export class App {}
@Component({
 selector: 'app-content',
 template: `
  Toggle content
  
 `,
})
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!');
 }
 
}

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

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

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

上例中,app-content組件templateRef屬性的來源,是在根組件的模板內(nèi),直接通過#符號獲取到了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),對于上下文中其他的屬性,就需要通過let-屬性名的方式訪問了.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。