在视图准备好之前修改事件处理程序中的视图

Question

当我的 nativescript 应用程序启动时，我有一个类负责登录并向我发送事件以通知当前状态。在登录过程中（通常需要 1 到 5 秒），我收到了许多更新事件，并且必须显示一个忙碌指示符，以便用户知道正在发生某些事情......

我的问题是当我的事件被触发时，用户界面还没有准备好（我想afterViewInit此时还没有被调用），因此hide/show方法我的LoadingIndicator 产生异常。

我正在使用来自@nstudio/nativescript-loading-indicator 的LoadingIndicator。这是我的主页.component.ts 中的事件处理程序示例：

private onUserLogin(info: LoginInfo): void {
   if (info == null) {
      this.loadingIndicator.show();
   } else {
      this.loadingIndicator.hide();
   }
}

我不确定解决方案。在我的onUserlogin 事件处理程序中使用setTimeout 执行循环以等待afterViewInit 事件已被触发似乎不是一个好主意.....

Answer 1

与 Angular 中的任何异步操作一样，推荐的模式是使用带有 BehaviorSubject() 的共享服务。这将异步事件与组件分离，并允许组件只关注视觉副作用。

@Injectable()
export class LoginService {
    public info$ = new BehaviorSubject<LoginInfo>(null);

    public onUserLogin(info: LoginInfo) {
        this.info$.next(info);
    }
}

您现在可以从组件订阅这些事件，但要在视图准备就绪时进行。

@Component({...})
export class ExampleComponent implements OnDestroy, OnInit {
    private destroyed$ = new Subject<void>();

    public constructor(private login: LoginService) { }

    public ngOnDestroy() {
       this.destroyed$.next();
       this.destroyed$.complete();
    }

    public ngOnInit() {
       this.login.info$.pipe(
          takeUntil(this.destroyed$)
       ).subscribe(info => {
           if (info == null) {
               this.loadingIndicator.show();
           } else {
               this.loadingIndicator.hide();
           }
       });
     }
}