在父组件中隐藏子组件答案

【问题标题】：hide child component in a parent component在父组件中隐藏子组件
【发布时间】：2021-09-14 18:43:56
【问题描述】：

我只想在子组件完成 http 调用后才在父组件中呈现子组件，但这对我不起作用，子组件不显示...

child selector in parent component
<app-child-component *ngIf="alert" (alert)="propagar($evento)"></app-child-component >


export class ParentComponent implements OnInit {
    alert = false;

    propagar(evento: boolean) {
        this.alert = evento;
}

export class ChildComponent implements OnInit {
    @Output alert = new EventEmitter<boolean>();

    ngOnInit() {
        this.childComponentService.getSomething().subscribe(response => {
               if(this.response.code === 200) 
                      this.alerta.emit(true);//here I just want the child component to be displayed
        })
    }
}

但它不起作用，即使服务正确响应，子组件也永远不会显示

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

你不能这样做，因为组件只会在*ngIf的条件为真时被渲染（即初始化）。

相反，我建议在您的子组件中完全处理它，通过在 HTTP 调用完成后将可观察的 HTTP 调用映射到 boolean，以确定是否应该呈现组件内容。

您可以尝试以下方法：

parent.component.html

<app-child-component></app-child-component>

child.component.ts

export class ChildComponent implements OnInit {
  ready$: Observable<boolean>;

  ngOnInit() {
    // Assign it to an observable to avoid handling subscribe/unsubscribe within the component class.
    ready$ = this.childComponentService
      .getSomething()
      .pipe(map((response) => response.code === 200));
  }
}

child.component.html

<!-- Wrap all your child component template with ng-container -->
<ng-container *ngIf="ready$ | async">
  <!-- Your child components stuff here which will be rendered only once the HTTP call is completed -->
</ng-container>

【讨论】：

【解决方案2】：

您正在对子组件使用结构指令。如果设置为 "false" 最初它甚至不会启动子组件，因此不会执行子组件中的 httpcall。您可以做的是使用 "[hidden]" 属性而不是初始值设置为 true 的 "*ngIf"。这样当子组件发出输出事件时，“hidden”的绑定属性可以设置为false，子组件将在DOM中查看。

child selector in parent component
<app-child-component [hidden]="alert" (alert)="propagar($evento)"></app-child-component >


export class ParentComponent implements OnInit {
    alert = true;

    propagar(evento: boolean) {
        this.alert = evento;
}

export class ChildComponent implements OnInit {
    @Output alert = new EventEmitter<boolean>();

    ngOnInit() {
        this.childComponentService.getSomething().subscribe(response => {
               if(response.code === 200) 
                      this.alert.emit(false);
        })
    }
}

【讨论】：

【解决方案3】：

如果你想访问你订阅的对象response，你需要在你的if语句中删除this.。

this.childComponentService.getSomething().subscribe(response => {
               if(response.code === 200) //         <<----- removed this. here
                      this.alerta.emit(true);
        })

【讨论】：

【解决方案4】：

我会尝试使用BehaviourSubjectlike

您的警报服务：

  alert = new BehaviourSubject(false)

你的子组件

alert:BehaviourSubject<boolean>;

constructor(private childComponentService:childComponentService, private alertService:alertService){
    this.alert = alertService.alert
}
...
this.childComponentService.getSomething.subscribe(
    () => this.alert.next(true));

你的html：

<app-child-component *ngIf="alert | async"></app-child-component >

【讨论】：