根据内部值隐藏组件

Question

在我的组件中，我调用了一个服务。当结果为空时，我想将组件设置为'hidden'，因为我不想要一个空的引导列。

<app-streams class="col-6" [hidden]="hideComponent"</app-streams>

我尝试设置一个@output变量，但这不起作用。

@Output() hideComponent: boolean = false
ngOnInit(): void {
this.hideComponent = true
}

注:'col-6'类必须在这个级别上，因为嵌套在组件模板中它不起作用。

任何想法?

Answer 1

一种方法是您可以从父组件中引用子组件变量值:

• 在子组件中执行以下操作:

hideComponent: boolean = false;
ngOnInit(): void {
this.hideComponent = true;
}

• 在父级中你可以这样做:

<app-streams
#appstreams
class="col-6"
[style.display]="appstreams.hideComponent ? 'none' : 'block'"
></app-streams>

工作示例:https://stackblitz.com/edit/angular-ivy-xghere?

解决这个问题的另一种方法是使用two way binding在父级和子级之间共享变量hideComponent，如下所示:

@Input() hideComponent: boolean = false;
@Output() hideComponentChange = new EventEmitter<boolean>();
ngOnInit(): void {
this.hideComponentChange.emit(true);
}

在父组件中你可以这样做:

<app-streams
class="col-6"
[(hideComponent)]="hideComponent"
*ngIf="!hideComponent"
></app-streams>

工作示例:https://stackblitz.com/edit/angular-ivy-tnr5fs?

Answer 2

我会翻转逻辑，并将ngIf应用到具有col类的div中，并使其容纳组件。这样，只有在div没有被隐藏的情况下，组件才会得到它，并且组件不必担心表示逻辑。

<div  class="col-6" *ngIf="!hideComponent">
<app-streams></app-streams>
</div>

如果你不能有这样的结构，那么你可以根据子进程中的变量给父进程HostBind()一个类。

Answer 3

你可以通过样式绑定来设置可见性样式属性:

<app-streams class="col-6" [style.visibility]="hideComponent? 'visible' : 'hidden'"</app-streams>

组件中，如果结果为空，则在服务订阅集hideComponent = true上，否则为false。