如何在另一个组件中调用div，这在所有页面中都是常见的，只对某个页面，并使该div从其他页面隐藏? &

Question

我有一个与所有其他组件相同的公共组件。在其中，我在该部分添加了一个滑动条，这只适用于一个组件。那么如何使组件中的特定div对所有其他组件不可见呢?当我在。ts文件中设置isVisible为true时，它在所有其他组件中也可见。如何使它只在一个页面中可见

<div class="mycontainer" *ngIf="isVisible">
<div class="border1"></div>
<div class="toggle1">
<mat-slide-toggle> New Toggle</mat-slide-toggle>
</div>

Answer 1

在您的.ts文件中设置@input并将其设置为false:

@Input() isVisible = false;

，只有在这个特定的时间给它一个真值

<your-component [isVisible]="true"></your-component>

则不需要添加，因为它是默认值

Answer 2

选项1

设isVisible为输入，默认值

@Input() isVisible = false

然后为特定的页面设置[isVisible]="true"

选项2

探索angular的内容投影。

将<ng-content></ng-content>添加到组件模板中，您可以通过

投射内容

<my-component>
... etc
<mat-slide-toggle> New Toggle</mat-slide-toggle>
</my-component>