Angular 当我使用 Observables 时 ViewChild 不工作

Question

I am using Angular 10 , and also NGXS 3.7.0 as my state management framework in my web application.

There are two components in my application; let's say ParentComponent and ChildComponent . The ChildComponent has a field called resources which is an array of ResourceInterface that by default equals to an empty array (ie, [] ). Inside the ChildComponent there is also a Run button, which emits an EventEmitter to inform the ParentComponent that the end user has clicked the Run button; hence, hey father, fetch the resources from the server and then update my resources field.

The problem is that, in the ParentComponent , when I don't use Observables it works, but when I subscribe to observable then it does not work. In fact, I have to use observable and cannot do my stuff without observable. In the following section I have provided the codes.

Child Component :

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
  resources: ResourceInterface[] = [];
      
  @Output() runRequest: EventEmitter<void>;

  constructor() {
    this.runRequest = new EventEmitter<void>();
  }
  
  onRunRequest(): void {
    this.runRequest.emit();
  }
}

Parent Component :

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent implements OnInit {
  rId: string;
  request$: Observable<DURequest | undefined>;
  @ViewChild(ChildComponent) child!: ChildComponent;

  constructor(
    private _service: DURService,
    private _rService: RService,
    private route: ActivatedRoute,
  ) {
    this.rId = this.route.snapshot.paramMap.get('id')!;
    this.request$ = this.rId ? this._service.watchDUR(this.rId) : of(undefined);
  }

  onRunRequest(): void {
    // This block works
    this.request$.subscribe(req => {
      this.child.resources = [
        {
          Id: '123',
          fullUrl: 'some full url'
        }
      ];
    });

    // This block does NOT work
    // this.request$.subscribe(req => {
    //   this._service.runRequest(req!).subscribe(res => {
    //     this.child.resources = [
    //       {
    //         Id: '123',
    //         fullUrl: 'some full url'
    //       }
    //     ];
    //   });
    // });

    // This block does NOT work
    // this.request$.subscribe(req => {
    //   this._service.runRequest(req!).subscribe(res => {
    //     this._service.fetchResources().subscribe(resources => {
    //       this.child.resources = [
    //         {
    //           Id: '123',
    //           fullUrl: 'some full url'
    //         }
    //       ];
    //     });
    //   });
    // });

    // The actual code should be this one, but this one does NOT work, too
    // this.request$.subscribe(req => {
    //   this._service.runRequest(req!).subscribe(res => {
    //     this._service.fetchResources().subscribe(resources => {
    //       this.child.resources = resources;
    //     });
    //   });
    // });
  }
}

Answer 1

@ViewChild(Component, { static: true}