Angular2:懒惰加载组件和注射剂作为单例

时间:2016-12-28 07:17:13

标签: angular

是否有人使用@Injectable(延迟加载组件)将loadChildren作为单例加载组件?

如果没有,是否有某种方法可以获得它?

我要求this post。根据这一点,不可能在子模块上注入@Injectable作为单例。

我正在尝试将@Injectable AppState注入单身人士:

@Injectable()
export class AppState {
  public user: string;

  constructor() {

  }
...

我已将AppModule设置为provider

// Application wide providers
const APP_PROVIDERS = [
  AppState
];

@NgModule({
  bootstrap: [ App ],
  declarations: [
    App,
    ErrorComponent
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true })
  ],
  providers: [
    APP_PROVIDERS
  ]
})
export class AppModule {
  constructor(public appRef: ApplicationRef, public appState: AppState) {}
}

所以,我还创建了一个"submodule"

@NgModule({
  //...
  providers: [ AppState ]
})
export default class LoginModule {

LoginComponent我做:

export class Login implements OnInit {

    constructor(private appState: AppState) {}

    public doLogin():void {
        this.appState.user = this.form.value.mail;
    }
}

然而,在名为Profile的另一个组件上,this.appState.user似乎未定义。

@NgModule({
  //...
  providers: [ AppState ]
})
export default class ProfileModule { /... }

@Component({
  //...
})
export class Profile implements OnInit {

  constructor(private appState: AppState) {

  }

  ngOnInit():void {
    this.user = this.appState.user;  <<<<<<<<<<<<< it's undefined
  }
}

如果我之前在另一个组件中设置了this.appState.user,为什么{{1}}会被解开?

2 个答案:

答案 0 :(得分:2)

该帖子解释了您需要知道的一切。在延迟加载的模块中声明的任何服务将只是该模块的单例。在根模块中加载的任何服务都将是整个应用程序中的单例,包括内部延迟加载的模块

答案 1 :(得分:1)

所有@Injectable()服务都是单身人士。加载组件是路由器的工作,而不是服务。