将TypeScript/Angular中的依赖项注入原型

我对TypeScript和Angular 7非常陌生，我试图实现菜单的某些组件在用户被授予权限时显示（JWT令牌包含一个角色）

我的想法是重用我拥有的GuardServices，并在过滤器循环中调用方法canActivate，以便返回的菜单是根据用户角色显示的菜单

@组件({
选择器：'应用程序根'，
templateUrl:'app.component.html'，
样式URL:['./app.component.scss']
})
导出类AppComponent{
公共应用程序页=[
{
标题：“仪表板”，
url:“/app/dashboard”，
图标：“家”
},
{...},
{
标题：“雇员”，
url:“/app/employees”，
图标：“联系人”，
守卫：AdminGuardService
},
{
标题：“注销”，
url:“/app/logout”，
图标：“注销”
}
];
公共认证=假；
公众立场='结束'；
建造师(
私有平台：平台，
私人splashScreen:splashScreen，
私有状态栏：状态栏，
专用路由器：路由器，
私有身份验证：AuthenticationService
) {
这是.initializeApp（）；
}
初始化EAPP（）{
(...)
}
getAppPages（）：任何{
返回此.appPages.filter（页面=>{
如果（page.guard！=null）{
page.guard.prototype.auth=this.auth；
返回page.guard.prototype.canActivate（）；
}
返回true；
});
}
}

根据您的最终目标，有很多方法可以实现这一点

如果您想在auth更改时更新这些，那么您可以将其设置为可观察的，订阅它，并过滤用户有权访问的路径。如果您使用可观察的，那么您的html可以异步这些项，并在适当的时候进行更新。几乎每次我去那里都能学到新东西。当我使用Firebase auth并拥有角色/团队/公共/私人等时，此方法是我对更改的反应

---

或者，如果您只在app init阶段关心，您可以创建一个可注入令牌（通过factory

useFactory

提供），或者使用app_初始值设定项并为您需要的提供者提供factory方法

我通过注入Angular的默认注入器并用它获取一个类的实例，成功地解决了这个问题：

import {Injector} from '@angular/core';

constructor(
    ...
    private injector: Injector
) {
    this.initializeApp();
}


getAppPages(): any {
    return this.appPages.filter(page => {
        if (page.guard != null) {
            return this.injector.get(page.guard).canActivate();
        }
        return true;
    });
}

---

谢谢你的回答。这或多或少是我所需要的，但我希望使用Angular’DI injector获得不同防护的实例，并利用任务，而不是手动传递引用（因为我可能不需要它们）。角形路由器可能使用与防护装置以相同方式通过相同的技术。我非常习惯使用Spring作为后端，在那里我会

@Autowire

应用程序上下文，然后调用

返回ctx.getBean（AdminGuardService.class）.canActivate（）。我的愿望是实现同样的目标，但使用打字/角度