Angular父组件仅在子组件完成HTTP请求后渲染子组件不生效如何解决

你的实现逻辑存在典型的死循环：

• 父组件初始alert = false，<app-child-component>上绑定了*ngIf="alert"，因此子组件从一开始就不会被初始化渲染
• 子组件没有被渲染的情况下，它的ngOnInit生命周期不会执行，HTTP请求不会触发，@Output的alert事件也永远不会被触发
• 父组件收不到子组件的事件，alert值永远为false，子组件永远不会被渲染，形成闭环死锁

• @Output 装饰器语法错误，缺少括号，应该写为@Output()
• 子组件中@Output定义的事件名是alert，但触发时写的是this.alerta.emit(true)，变量名多了字母a
• HTTP请求回调里的判断写了if(this.response.code === 200)，response是subscribe回调的入参，不需要加this前缀
• 父组件事件绑定里写的是(alert)="propagar($evento)"，Angular事件回调的默认参数名是$event不是$evento

方案1：将HTTP请求逻辑移到父组件（推荐） #

判断子组件是否需要渲染的逻辑前置到父组件执行，请求成功后再渲染子组件：
父组件代码：

export class ParentComponent implements OnInit {
    alert = false;

    constructor(private childService: ChildComponentService) {}

    ngOnInit() {
        // 父组件提前发起请求
        this.childService.getSomething().subscribe(response => {
            if(response.code === 200) {
                this.alert = true;
            }
        })
    }
}

父组件模板：

<!-- 直接用请求结果控制子组件渲染，不需要绑定子组件的输出事件 -->
<app-child-component *ngIf="alert"></app-child-component>

方案2：保留子组件内请求逻辑，调整显隐控制方式 #

如果必须要子组件自己处理请求，不要销毁整个子组件，改为控制子组件内部内容的显隐：
父组件模板：

<!-- 移除*ngIf，保证子组件始终初始化 -->
<app-child-component (alert)="propagar($event)"></app-child-component>

子组件模板：

<!-- 子组件内部用变量控制内容显隐 -->
<div *ngIf="isShow">
  <!-- 原有子组件所有内容 -->
</div>

子组件代码：

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

    constructor(private childComponentService: ChildComponentService) {}

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

内容的提问来源于stack exchange，提问作者Lombardinho