在某些情况下隐藏Angular指令的元素

Question

是名为my-directive的指令。指令的模板包含2个元素：

<div>
    <!-- element1 -->
</div>
<div>
    <!-- element2 -->
</div>

将其添加到另一个html文件中的方法是：

<app-my-directive></app-my-directive>

我的问题是，如果将它添加到特定的html中，是否有办法使该指令仅显示element1，否则显示所有元素？

Answer 1

您可以发送输入以检测要显示的元素：

@Component({
  selector: 'my-directive',
  inputs: ['myCondition'],
  template: `
    <div *ngIf="myCondition">
        <!-- element1 -->
    </div>
    <div *ngIf="!myCondition">
        <!-- element2 -->
    </div>
  `
})
class MyDirective {
    myCondition: boolean;
}