ディレクティブの視認性トグラーはどのようになっていますか？

Question

指示の視認性トグラーを助けてください。 <h1 *appTest visibility="true" id="myDirective">navigation:</ H1>

このディレクティブパスの可視性のVARへ：

import { Directive, Input, OnInit, ViewContainerRef, TemplateRef } from '@angular/core'; 

@Directive({ 
    selector: '[appTest]' 
}) 
export class TestDirective implements OnInit { 

    @Input() visibility: boolean; 

    constructor(private viewContainer: ViewContainerRef, private template: TemplateRef<Object>) { 

    } 

    ngOnInit() {  
     console.log(this.visibility); 
     if(this.visibility) { 
     this.viewContainer.createEmbeddedView(this.template); 
     } else { 
     this.viewContainer.clear(); 
     } 
    } 

} 

しかし、コンソールの表示：

未定義

そして#myDirectiveがあるテンプレートでは、私は以下のディレクティブを持っていますブラウザに表示されません。属性「可視性」の値に応じて#myDirectiveを表示および非表示にする必要があります

Answer 1

構造ディレクティブを処理する際には、それらを拡張する方法を理解する必要があります。

例えば

テンプレート：次のように

<h1 *appTest visibility="true" id="myDirective">navigation:</h1> 

を書き換えることができます。

<ng-template [appTest]> 
    <h1 visibility="true" id="myDirective">navigation:</h1> 
</ng-template> 

だから、私の質問は：あなたが<ng-template [appTest]>?

からvisibility入力を取得したいですどのように持っています入力を*appTestに入力する：

あなたが

​​3210

を記述する場合、あなたは

[appTest]="prop1Value" 

を取得すると、あなたのディレクティブで、次の@Input

@Input() appTest; 

を持つことができます...のは、どのように考えて

をしてみましょうまたは

@Input('appTest') visibility; 

私は上記のコードで別名@Input(bindingPropertyName)を使用しました。

その後、あなたは、より多くの入力を持つようにしたい場合：

*appTest="prop1Value; prop2: prop2Value; prop3: prop3Value" 
       || 
       \/ 

[appTest]="prop1Value" [appTestProp2]="prop2Value" [appTestProp3]="prop3Value" 

をコンポーネントが持っている必要があります：組み込みのよう*ngIf

@Input() appTest; 

@Input() appTestProp2; 

@Input() appTestProp3; 

をとにかくあなたのディレクティブが見えますし、我々ドン場合、私はそれを使用します追加のロジックが必要ありません。