Interaction entre ngAfterViewInit et Observable dans le cycle de vie angulaire

Question

enable.service.ts

@Injectable({
  fourni dans : 'root'
})
classe d'exportation EnableService {
  isEnabled$ = from(this.client.init()).pipe(
    switchMap(() => this.client.getEnabled()),
    map(([enabled, isAdmin]) => ({enabled : true, isAdmin : false})),
    partager()
  ); // 不完全是这样，但是是一种返回enable et isAdmin的observable

  constructeur(
    // 一些构造函数
  ) {}
}</pré>
<p><strong>main.component.ts</strong></p>
<pre class="brush:php;toolbar:false;">classe d'exportation MainComponent implémente OnInit, AfterViewInit, OnDestroy {
  @ViewChild('mymap') conteneurRef : ElementRef<HTMLDivElement>;

  isAdmin : booléen = faux ;
  isEnable : booléen = faux ;

  constructeur(
    EnableService privé : EnableService,
  ) {
    this.enableService.isEnabled$.subscribe(res => {this.enable = res.enabled; this.isAdmin = res.isAdmin});
  }

  async ngAfterViewInit() : Promesse<void> {
    // HACK : il s'agit d'un enableService qui est utilisé pour créer un conteneurRef #mymap.
    wait new Promise(resolve => setTimeout(resolve, 1000));

    // 必须存在才能正确隐藏/移除地图
    si (this.containerRef) {
      // 一些第三方sdk初始化只有在containerRef存在时才执行
    }
  }</pré>
<p><strong>main.component.html</strong></p>
<pre class="brush:php;toolbar:false;"><div #mymap *ngIf="!isEnable || isAdmin"></div>

间，它将会出错。

C'est vrai, c'est vrai, c'est vrai.最终还是true, 也会导致错误。我尝试将observable的订阅从构造函数移到ngOnInit中，也不起作用。

Answer 1

Est-ce utile d'essayer ceci ?

ts

get isEnabled$() {
    return this.enableService.isEnabled$;
}

html

<div #mymap *ngIf="!(isEnabled$ | async).isEnable || (isEnabled$ | async).isAdmin"></div>