Question

请帮助为指令设置可见性toggler。在模板中我有遵循指令： <h1 *appTest visibility="true" id="myDirective">navigation:</ H1＆GT;

该指令将visibility 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”

的值

Answer 1

当您处理结构指令时，您应该了解如何扩展它们。

例如你的模板：

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

可以改写如下：

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

所以我的问题是：您希望如何从visibility

获得<ng-template [appTest]>?输入

您必须将您的输入包含在*appTest声明中：

让我们思考......

如果你写

*appTest="prop1Value"

然后你会得到

[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，如果我们不需要任何额外的逻辑，我会使用它。

如何使指示的可见性toggler？

1 个答案: