如何使指示器显示开关？

请帮助提出指令的可见性。在模板中，我有如下指令： <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

如何使指示器显示开关？

回答

相关问题