Angular 수명 주기에서 ngAfterViewInit과 Observable 간의 상호 작용
P粉131455722
2023-08-16 19:03:09
<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 and isAdmin'yobservable
건설자(
// 一些构造函数
) {}
}</pre>
<p><strong>main.comComponent.ts</strong></p>
<pre class="brush:php;toolbar:false;">수출 클래스 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存가 时才执行
}
}</pre>
<p><strong>main.comComponent.html</strong></p>
<pre class="brush:php;toolbar:false;"><div #mymap *ngIf="!isEnable || isAdmin"></div></pre>
<p>目前这是一个可工是一은 ngAfterViewInit中에서 1가지 종류의 해킹을 사용했습니다.</p>
<p>AfterViewInit이 enableService获取值之后执行?</p>
<p>或后最终变为true,会导致问题,同样,如果它一开始就是사실입니다.最终还是사실입니다.
이것을 시도해 보는 것이 도움이 되나요?
ts
으아악html
으아악