Angular ライフサイクルにおける ngAfterViewInit と Observable の間の相互作用

Question

<p><strong>enable.service.ts</strong></p> <pre class="brush:php;toolbar:false;">@Injectable({ 提供対象: 'ルート' }) エクスポートクラス EnableService { isEnabled$ = from(this.client.init()).pipe( switchMap(() => this.client.getEnabled()), map(([enabled, isAdmin]) => ({enabled: true, isAdmin: false})), 共有（） ); // 完全にそうなっているわけではありませんが、enable と isAdmin の監視可能なものを返します コンストラクタ（ // いくつかの造造関数数 ) {} }</pre> <p><strong>main.component.ts</strong></p> <pre class="brush:php;toolbar:false;">エクスポート クラス MainComponent は OnInit、AfterViewInit、OnDestroy を実装します { @ViewChild('mymap') コンテナ参照: ElementRef<HTMLDivElement>; isAdmin: ブール値 = false; isEnable: ブール値 = false; コンストラクタ（ プライベートenableService: EnableService、 ) { this.enableService.isEnabled$.subscribe(res => {this.enable = res.enabled; this.isAdmin = res.isAdmin}); } async ngAfterViewInit(): Promise<void> { // HACK: 必要等待機enableService订阅获取实际值，否containerRef #mymap有無否将無法確定 await new Promise(resolve => setTimeout(resolve, 1000)); // 必須存在才能正确隐藏/移除地图 if (this.containerRef) { // いくつかの第三方 SDK 初期化のみ有在containerRef 存在時間才行 } }</pre> <p><strong>main.component.html</strong></p> <pre class="brush:php;toolbar:false;"><div #mymap *ngIf="!isEnable || isAdmin"></div></pre> <p>これは現在動作可能なコードであり、ngAfterViewInit で 1 秒のレイハックが使用されます。enableService に数秒の時間がかかる場合、問題が発生する可能性があります。 <p>有没有办法确保AfterViewInit在enableService获取值その後実行しますか?</p>

または、その 1 の遅延を使用しない、より良い方法がありません。isEnable の最初の値が false に設定され、その後最終的に true に変更されると、同様に、最初が true の場合に問題が発生する可能性があります。これも事実であり、これもまた、動作しない可能性があります。

Answer 1

これを試してみると役に立ちますか?

ts

リーリー

html

リーリー