如何使指示器顯示開關？

請幫助提出指令的可見性。在模板中，我有如下指令： <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，具體取決於屬性「visibility」的值

來源

2017-09-16 super.prozandr1

您是否嘗試爲可見性設置默認值visibility：boolean = false？ – zgue

我需要從屬性 –

獲得可見性參數。通過在模板中使用'ngIf'指令併爲其分配一個動態'boolean'變量，可以直接顯示/隱藏元素。然而，這種方法將從DOM中完全刪除相應的模板（不僅僅保留'visibility：hidden'，只隱藏它在頁面上，在DOM中保留該元素的空間）。你只是想根據你的輸入變量切換元素的可見性或者從DOM中完全添加/刪除元素嗎？ – amal

當您處理結構指令時，您應該瞭解它們如何擴展。

例如您的模板：

<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"

您的組件應該有：

@Input() appTest; 

@Input() appTestProp2; 

@Input() appTestProp3;

反正你的指令看起來像內置*ngIf，如果我會用它，我們不要不需要任何額外的邏輯。

來源

2017-09-17 07:19:00 yurzui

如何使指示器顯示開關？

回答

相關問題