Question

我想通过配置在一个URL中输入不同的组件：

routing.module.ts

const routes = [ 
  // ...
  {
    path: 'members',
    component: applicationInjector.get(ConfigurationService).isAuth
      ? MembersAuthComponent
      : MembersNoAhthComponent
  },
];

main.ts

export let applicationInjector: Injector = null;

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(componentRef => {
    applicationInjector = componentRef.injector;
  })
  .catch(err => console.error(err));

我运行ng serve时工作正常，但在ng build --prod期间出现错误： 模板编译“ routingModule”时出错装饰器不支持函数调用，但调用了“ applicationInjector”。

Answer 1

这是使用角度路由器防护装置的最佳情况

成员登录保护

@Injectable({
  providedIn: 'root'
})
export class MemeberGuard implements CanActivate {
  constructor(private ConfigService: ConfigurationService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.configServ.isAuth) {
      return true;
    } else {
      this.router.navigateByUrl('/notauthorized-members');
      return false;
    }
  }
}

路线

const routes = [ 
  {
    path: 'members', 
    component: MembersAuthComponent,
    canActivate: [MemeberGuard ]
  }, 
{
    path: 'notauthorized-members', 
    component: MembersNoAhthComponent
  }, 
];

阅读这篇有用的文章Better Redirects in Angular Route Guards

Answer 2

您可以创建一个空组件，仅用于破坏登录状态的已填充组件

成员包装器组件

main()

模板

export class MemberWrapperComponent {

  constructor(private configServ:ConfigurationService) { }

  get isAuth(){
    return this.configServ.isAuth;
  }

}

demo ?

路由模块中的装饰器不支持函数调用

2 个答案: