如何显示写在公共组件内的 div 元素,使其在 Angular 的特定页面上可见?
How to display a div element that is written inside a common component to be visible on one particular page in Angular?
我编写了一个通用过滤器组件,用于我的仪表板中的 2 个页面。我想在过滤器组件中包含一个切换单选按钮,它只呈现一个页面而不是两个页面。如何做到这一点?
有两种方法。您可以获得当前激活的路由并检查激活的组件是否是您要查找的组件类型,然后禁用切换按钮。
更简单、更符合规范的方法是将 @Input() 添加到您的组件。
组件中:
@Input() showToggleButton: boolean;
在 html 中,它使用通用组件,但没有切换按钮:
<app-common-component [showToggleButton]="false"> </app-common-component>
在公共组件html中:
<div *ngIf="showToggleButton"> </div>
我编写了一个通用过滤器组件,用于我的仪表板中的 2 个页面。我想在过滤器组件中包含一个切换单选按钮,它只呈现一个页面而不是两个页面。如何做到这一点?
有两种方法。您可以获得当前激活的路由并检查激活的组件是否是您要查找的组件类型,然后禁用切换按钮。
更简单、更符合规范的方法是将 @Input() 添加到您的组件。
组件中:
@Input() showToggleButton: boolean;
在 html 中,它使用通用组件,但没有切换按钮:
<app-common-component [showToggleButton]="false"> </app-common-component>
在公共组件html中:
<div *ngIf="showToggleButton"> </div>