angular - 为什么一个组件在一个守卫之后不执行？

Question

我在我的应用程序中实现了警卫，它的工作方式一般如下：

• 登录页面（用户名和密码）
• 令牌被创建和存储
• Tab1 显示事件列表。单击任何事件都会打开一个模式窗口，该窗口是一个包含该事件特定信息的组件。

提到的这些步骤是理想的情况，但碰巧不是，当单击特定事件时，它会向我显示以下错误：

无法绑定到“ngIf”，因为它不是“ion-content”的已知属性。

寻找错误，通过在components.module.ts中添加CommonModule来解决，当然是添加了，否则在实现Guard之前应用程序永远无法工作。

测试，我必须去tab2（按类别的事件），回到tab1，点击任何事件，它已经显示它应该是......

当我移动到 tab2 时会加载什么？

这里有一些代码：

应用程序路由.module.ts：

{
    path: 'main',
    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule),
    canLoad:[UsuarioGuard]
  }

usuario.guard.ts：

constructor(private usuarioService:UsuarioService){}

  canLoad(): Observable<boolean> | Promise<boolean> | boolean {

    return this.usuarioService.validaToken();
  }

usuario.service.ts：

async cargarToken(){
    this.token = await this.storage.get('token') || null;
  }

  async validaToken():Promise<boolean>{

    await this.cargarToken();

    if(!this.token){
      this.navCtrl.navigateRoot('/login');
      return Promise.resolve(false);
    }

    return new Promise<boolean>(resolve => {

      const headers = new HttpHeaders({
        'Content-Type':'application/json',
        'Authorization': 'Bearer ' + this.token
      });

      this.http.get(`${URL}/API_3/userTkn`, { headers })
      .subscribe(resp => {
        if(resp['ok']){
          this.usuario = resp['usuario'];
          resolve(true);
        }
        else{
          this.navCtrl.navigateRoot('/login');
          resolve(false);
        }
      });
    });
  }

解决方案

将 canLoad[UsuarioGuard] 更改为 canActivate[UsuarioGuard]

标签： angularionic-framework