【问题标题】:Angular2, manually resolve a type by string/nameAngular2,通过字符串/名称手动解析类型
【发布时间】:2017-07-21 18:21:05
【问题描述】:

是否可以仅通过名称来手动解析组件?

我有一个包含组件名称的字符串变量,比如“UserService”

我需要能够解决这种类型,我查看了Injctor,从文档中可以看到有一个resolve()resolveAndCreate() (https://angular.io/docs/ts/latest/api/core/Injector-class.html)

但我没有类型。

谢谢

史蒂夫

编辑:尝试了以下方法:

System.import("path/to/service").then(p=>{

     var injector = Injector.resolveAndCreate([p[this.serviceName]]);//works

     var serviceInstance = injector.get(p[this.serviceName]); //Fails with "No provider for Http! (UserService -> Http)".


});

我有 Http 可用,它是在引导期间提供的,这适用于应用程序的其他部分。

bootstrap(AppComponent, [
    ROUTER_PROVIDERS, Http, HTTP_PROVIDERS, UrlBuilderService,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    provide('notification', { useClass: NotificationService })
]);

有什么想法吗?

进一步编辑

我现在这样称呼resolveAndCreate

var injector = Injector.resolveAndCreate([p[this.serviceName], Http]);

失败了

没有 ConnectionBackend 的提供者! (用户服务-> Http-> 连接后端)

所以我这样称呼它:

var injector = Injector.resolveAndCreate([p[this.serviceName], Http, ConnectionBackend]);

由于其他一些缺失的东西而失败。

改成这个

var injector = Injector.resolveAndCreate([p[this.serviceName], HTTP_PROVIDERS]);

现在一切正常。

我不明白为什么它不能自动解析这些组件,因为我在引导期间提供了它们。

【问题讨论】:

    标签: typescript angular systemjs


    【解决方案1】:

    要按名称获取组件,请导入类似的组件

    import * as components from './components'
    

    并通过

    访问它们
    var componentName = 'SomeComponent';
    components[componentName]
    

    另请参阅来自Rob Wormald 来自https://github.com/angular/angular/issues/7596#issuecomment-198199074 的此 Plunker

    Injector.resolveAndCreate(
    

    您使用传递给bootstrap(..., [Providers]) 的提供程序创建了一个与从 Angular 创建的连接器完全断开连接的新注入器。
    以这种方式创建的注入器只能解析传递给 resolveAndCreate() 的提供程序。

    如果您想使用与 Angular 应用程序相同的注入器,则需要注入注入器

    constructor(private injector:Injector) {
      injector.get(...);
    }
    

    您可以从传递的注入器创建一个子注入器,并根据需要覆盖绑定。子注入器要么解析为被覆盖的绑定,要么在尝试解析请求的依赖项时向上遍历父注入器直到 root。

    【讨论】:

    • 如何将components[componentName] 变成一个组件?
    • 您需要将其添加到entryComponents: [...],然后您应该能够创建一个像stackoverflow.com/questions/36325212/…中所示的组件
    【解决方案2】:

    您可以通过使用system.js(即angular2使用的加载器)来实现这一点:

    System.import('path/to/UserService').then(m => 
    {
        //Here you can access user service and use it in injector etc.
        Injector.resolveAndCreate([m.UserService]);
    });
    

    这篇文章很好地说明了这项技术:Lazy Loading of Route Components in Angular 2

    【讨论】:

    • 谢谢你的想法,它是部分的。有关更多信息,请参阅我更新的问题。谢谢
    猜你喜欢
    • 1970-01-01
    • 2023-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-01
    • 2018-04-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多