Angular - 指令如何「看」模板和ViewContainer？

我有一個簡單的組件，它通過自定義指令中指定延遲後注入數Angular - 指令如何「看」模板和ViewContainer？

我已經知道*是角脫糖暗示的語法變得像

<ng-template ...> 
...actual markup 
</ng-template>

我也知道我們可以通過注入組件/模板到viewContainer：

this.viewContainerRef.createEmbeddedView/Component(this.templateRef);

該指令代碼：

個

@Directive({ 
    selector: '[appDelay]' 
}) 
export class DelayDirective { 
    constructor(
    private templateRef: TemplateRef<any>,private viewContainerRef: ViewContainerRef 
) { } 

    @Input() set appDelay(time: number): void { 
    setTimeout(()=>{ 
     this.viewContainerRef.createEmbeddedView(this.templateRef); 
    }, time); 
    } 
}

的文檔指出：

要訪問一個元素的ViewContainerRef，您可以放置一個指令與ViewContainerRef的元素注入，或者你通過ViewChild查詢獲得它。

問：

在一般模擬性：什麼是templateRef和viewContainerRef模板「字符串值」？

恕我直言去加糖模板會是這樣的：

<ng-tempalte ...> 
    <card *appDelay="500 * item"> 
     {{item}} 
    </card> 
</ng-template>

所以ViewContainerRef將<ng-tempalte ...>

一個參考，templateRef將在<card >...</card>

參考 - 那是對的嗎？

（此外，是否有可能console.log()那些HTML模板，看看實際的標記？

https://plnkr.co/edit/80AGn8bR4CiyH0ceP8ws?p=preview

來源

2017-05-30 Royi Namir

你可能會發現[本條]（https://hackernoon.com/exploring-angular-dom-abstractions-80b3ebcfc02）有用 –

ViewContainerRef只是指向元素將主機插入的意見。這些意見將作爲兄弟姐妹到該主機元素。

由於結構上的指令評論像將主機元素。

Desugar爲

<div *appDelay="500"> 
    Hooray 
</div>

將

<ng-template [appDelay]="500"> 
    <div> 
     Hooray 
    </div> 
</ng-template>

它也可以像這樣進行描述：

<ng-template view-container-ref></ng-template> 
<!-- ViewRef --> 
    <div> 
    Hooray 
    </div> 
<!-- /ViewRef -->

由於ng-template不加蓋到DOM它將呈現爲。

Angular將參照此評論標籤創建ViewContainerRef。

vcRef.element.nativeElement

每個ViewContainer只能有一個錨點元素，每個錨點元素只能有一個ViewContainer。 ViewContainer是一個容器，可以幫助您處理意見（ViewRef，EmbeddedViewRef）

而且TemplateRef實例將被創建

class TemplateRef_ { 
    constructor(private _parentView: ViewData, private _def: NodeDef) { } 

    get elementRef(): ElementRef { 
    return new ElementRef(asElementData(this._parentView, this._def.index).renderElement); 
    }

及其elementRef（錨或位置）將指向相同的註釋元素。

TemplateRef的主要特徵是具有template財產

this.templateRef._def.element.template

此屬性不包含HTML字符串，但描述view

this.templateRef._def.element.template.factory + ''

將打印

"function View_AppComponent_1(_l) { 
    return jit_viewDef1(0,[(_l()(),jit_elementDef2(0,null,null,1,'div',[],null,null, 
     null,null,null)),(_l()(),jit_textDef3(null,['\n Hooray\n']))],null,null); 
}"

所以這是我們的模板。正如你可以看到它描述了與文本div根元素和子文本節點視圖\n Hooray\n

角用途，例如ViewDefinitions分別位於ngfactories構建DOM樹