Angular 수명 주기에서 ngAfterViewInit과 Observable 간의 상호 작용

Question

enable.service.ts

@Injectable({
  제공됨: '루트'
})
내보내기 클래스 EnableService {
  isEnabled$ = from(this.client.init()).pipe(
    switchMap(() => this.client.getEnabled()),
    map(([enabled, isAdmin]) => ({enabled: true, isAdmin: false})),
    공유하다()
  ); // 不完全是这样，但是是一种返回enable and isAdmin'yobservable

  건설자(
    // 一些构造函数
  ) {}
}

main.comComponent.ts

수출 클래스 MainComponent는 OnInit, AfterViewInit, OnDestroy를 구현합니다.
  @ViewChild('mymap') 컨테이너Ref: ElementRef<HTMLDivElement>;

  isAdmin: 부울 = false;
  isEnable: 부울 = false;

  건설자(
    개인 활성화 서비스: 활성화 서비스,
  ) {
    this.enableService.isEnabled$.subscribe(res => {this.enable = res.enabled; this.isAdmin = res.isAdmin});
  }

  async ngAfterViewInit(): 약속<void> {
    // 해킹: 需要等待enableService订阅获取实际值，否则containerRef #mymap是否存재将无法确定
    새로운 약속을 기다리세요(resolve => setTimeout(resolve, 1000));

    // 必须存재才能正确隐藏/移除地图
    if (this.containerRef) {
      // 一些第3方sdk初始化只가 있음containerRef存가 时才执行
    }
  }

main.comComponent.html

<div #mymap *ngIf="!isEnable || isAdmin"></div>

目前这是一个可工是一은 ngAfterViewInit中에서 1가지 종류의 해킹을 사용했습니다.

AfterViewInit이 enableService获取值之后执行?

或后最终变为true，会导致问题，同样，如果它一开始就是사실입니다.最终还是사실입니다.

Answer 1

이것을 시도해 보는 것이 도움이 되나요?

ts

으아악

html

으아악