ngIf 的组件初始化不会触发 ngOnInit

Question

我有一个父组件，其中包含一些基于 ngIf 评估呈现的子组件。

我使用的是 Angular 8.1.3

父组件

import { ActivatedRoute } from '@angular/router';
import {FirstStageViewComponent} from "src/app/first-stage-view/first-stage-view.component";
import {SecondStageViewComponent} from "src/app/second-stage-view/second-stage-view.component";
import {SecondStageFormComponent} from "src/app/second-stage-form/second-stage-form.component";
import {ThirdStageFormComponent} from "src/app/third-stage-form/third-stage-form.component";
import {ThirdStageViewComponent} from "src/app/third-stage-view/third-stage-view.component";
import { ProdService } from "src/app/service/prod-service";


@Component({
  selector: 'app-prod-view',
  templateUrl: './prod-view.component.html',
  styleUrls: ['./prod-view.component.css']
})
export class ProdViewComponent implements OnInit 
{

  id;
  _stage: string;
  constructor(private prodService: ProdService, private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.params.subscribe(params => this.id=params.id);

    this.prodService.get(this.id).subscribe((data: string) => (this._stage = data["_stage"]),
                                           error => (console.log(error)));

  }

  talkBack(_updatedStage: string) {

    this._stage=_updatedStage;
  }

}

及其模板

<div class="container">


    <div *ngIf="_stage>0">
        <app-first-stage-view [id]=id></app-first-stage-view>
    </div>

    <div *ngIf="_stage==1 else stage2">
        <app-second-stage-form [id]=id (talk)=talkBack($event)></app-second-stage-form>
    </div>
    <ng-template #stage2>
    <div *ngIf="_stage>1">
        <app-second-stage-view [id]=id></app-second-stage-view>
    </div>
    </ng-template>


    <div *ngIf="_stage==2 else stage3">
        <app-third-stage-form [id]=id (talk)=talkBack($event)></app-third-stage-form>
    </div>
    <ng-template #stage3>
    <div *ngIf="_stage>2">
        <app-third-stage-view [id]=id></app-third-stage-view>
    </div>
    </ng-template>
</div>

这是第二个子组件（未正确初始化的那个）

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from "@angular/forms";
import { ThirdStageService } from "src/app/service/third-stage.service";

@Component( {
    selector: 'app-third-stage-form',
    templateUrl: './third-stage-form.component.html',
    styleUrls: ['./third-stage-form.component.css']
} )
export class ThirdStageFormComponent implements OnInit {

    tsForm: FormGroup;
    @Input() id: string;
    @Output() talk: EventEmitter<string> = new EventEmitter<string>();

    constructor( private tsService: ThirdStageService,
        private formBuilder: FormBuilder ) {}

    ngOnInit() {
        this.tsForm = this.formBuilder.group( {
            ingredient: "TEST"
        } );

    }

}

还有一个用于测试的缩小模板

<div class="container">
    <form [formGroup]="tsForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="name">{{ tsForm.controls[0].value }}</label> <input type="text"
                class="form-control" id="ingredient" formControlName="ingredient"
                required>
        </div>
    </form>
</div>

父级从服务器检索 _stage 值，并正确显示第一个子级。
然后该组件通过 EventEmitter 将新的 _stage 值回传给其父级，父级相应地更新其变量的值。
新值 (2) 是实际上将我的第二个 ngIf 变为 true 的值，并且确实调用了第二个孩子（它称为第三阶段形式，不要混淆）构造函数。但是它的 ngOnInit 没有启动。
默认值“TEST”没有显示在我的输入字段中，通过 Augury 检查组件树，我可以看到构造函数注入的两个依赖项存在，而在 ngOnInit 中创建的表单组不存在。
如果我创建一个直接指向我的子组件的新路由，一切都会按预期工作。

Answer 1

您正在使用异步的可观察对象。当请求完成时，subscribe() 中的任何内容都会被调用，这可能随时发生。

所以，您的this.id 是在您已经在第二个 observable 上调用 subscribe 之后设置的。您需要使用一些地图来确保订阅的顺序，例如concatMap()

 ngOnInit() {
  this.route.params.pipe(
    concatMap(params => this.prodService.get(params.id))
  )
}

Answer 2

哈维尔，当你写作时

this.route.params.subscribe(params => this.id=params.id);
//here this.id has no value
this.prodService.get(this.id).subscribe(...)

你需要使用 swithMap

this.route.params.pipe(
  switchMap((params)=>{ 
    //here you has "params" 
    this.id=params.id
    //we want return 
    return this.prodService.get(this.id)
  })
  ).subscribe((data: string) => (this._stage = data["_stage"]),
              error => (console.log(error))
  );