Angular ライフサイクルにおける ngAfterViewInit と Observable の間の相互作用
<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 の場合に問題が発生する可能性があります。これも事実であり、これもまた、動作しない可能性があります。
