使用Injector检索服务会破坏SSR,使用路由解析器和继承的组件

时间:2018-11-05 20:38:44

标签: angular typescript angular-ui-router angular-universal

首先,我们使用ui-router和路由解析将数据注入组件。

我们有许多类似这样的基本组件继承的组件

@Component({
....
})
export class ChildComponent extends BaseComponent{
}

====================

@Component({
....
})
export class BaseComponent implements OnInit, AfterViewInit{

 constructor(serviceOne: ServiceOne, serviceTwo: ServiceTwo) {
 }

}

之前,在基本组件构造函数中,我们注入了许多服务

constructor(serviceOne: ServiceOne, serviceTwo: ServiceTwo) {
}

这意味着这些必须从子组件中传递下来

@Component({
   ....
})
export class ChildComponent extends BaseComponent{

constructor(
    @Inject('dataFromRouteResolver') dataFromRouteResolver,
    serviceOne: ServiceOne, 
    serviceTwo: serviceTwo){
    super(serviceOne, serviceTwo) {

  }
}

由于我们有大量的服务和组件都来自同一个基本组件,因此维护起来变得有些费力,因此在阅读本文之后;

https://blogs.msdn.microsoft.com/premier_developer/2018/06/17/angular-how-to-simplify-components-with-typescript-inheritance/

我们决定实现AppInjector并使用jector.get(ServiceOne)来获取服务,因此基本组件构造函数如下所示;

private serviceOne: ServiceOne;
private sericeTwo: ServiceTwo;

constructor(){

 const injector = AppInjector.getInjector();
 this.serviceOne = injector.get(ServiceOne);
 this.serviceTwo = injector.get(ServiceTwo);

}

这很好用,并且确实清除了我们的派生组件代码和import语句;不需要通过super()将任何东西传递给基本组件构造函数。一个障碍是,角度通用停止工作。使用此模式的任何页面在ui视图中都没有。如果我继续使用旧方法,将所有内容注入派生组件中并将其传递给基本组件,则角度通用将再次起作用并返回整个模板。

我是否在绞盘中缺少某种周期或顺序的东西,该模板是先以通用角度编译的?

任何帮助表示赞赏。谢谢。

0 个答案:

没有答案