Angular 수명 주기에서 ngAfterViewInit과 Observable 간의 상호 작용
P粉131455722
P粉131455722 2023-08-16 19:03:09
0
1
513
<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,会导致问题,同样,如果它一开始就是사실입니다.最终还是사실입니다.
P粉131455722
P粉131455722

모든 응답(1)
P粉026665919

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

ts

으아악

html

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿