Angular2ドキュメントのカスタム構造指示

Question

次のリンクのカスタム構造指示の例では、TemplateRefとViewContainerRefはどのようなものを指していますか？

https://angular.io/guide/structural-directives#unless

指令通常のビューを持っていません。したがって、templateRefはHTMLタグまたはディレクティブが添付されているComponentを指していますか？たとえば、次のコードでは、テンプレートは<p> ...</p>の間のすべてですか？私は*が<ng-template>に変換されることを覚えています。

<p *myUnless="condition">Show this sentence unless the condition is true.</p> 

この例では、ViewContainerRefとは何ですか。一般的には、ビューコンテナとして<ng-container>を追加しますか？この例ではどこから来ていますか？

Answer 1

この例

<p *myUnless="condition">Show this sentence unless the condition is true.</p> 

だから、あなたがそのmyUnlessディレクティブはng-template要素の上に置かれ、今見ることができます

<ng-template [myUnless]="condition"> 
    <p>Show this sentence unless the condition is true.</p> 
<ng-template> 

にコンパイラによって変換され、それがtemplateRef

へのアクセス権を持っている理由です

したがって、templateRefはHTMLタグまたはComをポイントします指示文 が添付されていますか？

"sort of"は、指示が添付されているng-template要素の内容を指しています。フードの下では、ng-templateコンテンツ用に作成された埋め込みビュー定義を参照します。

この例では、ViewContainerRefとは何ですか。

どのHTML要素もビューコンテナとして機能できます。この場合も、このディレクティブは、ディレクティブのホスト要素を参照するビューコンテナを挿入します。

ng-template要素がコメントDOMノードとしてレンダリングされるので、あなたが見ることの両方ViewContaineRefこのコメントノードへTemplateRefポイント：

export class MyUnless { 
    constructor(t: TemplateRef<any>, vc: ViewContainerRef) { 
    console.log(t.elementRef.nativeElement.nodeName); // #comment 
    console.log(t.elementRef.nativeElement === vc.element.nativeElement); // true 
    } 
}