Angular2 Routing-Resolve 接口使用与 OpaqueToken答案

【问题标题】：Angular2 Routing-Resolve interface usage with OpaqueTokenAngular2 Routing-Resolve 接口使用与 OpaqueToken
【发布时间】：2017-07-16 08:56:08
【问题描述】：

我想在实例化路由/组件之前获取数据。因此，我想使用 Angular2-Routing-Module 中的“解析器”接口。

看看我的代码。它使用字符串作为提供程序名称，但如果我为提供程序使用 OpaqueToken，则会引发错误。

注意“不工作”的评论。

1 我的（子）路线（摘录）。

export const routes: Routes = [{
path: 'myPath',
component: MyComponent,
children: [
    {
        path: ':id',
        component: MyComponent,
        resolve: {
            itemData: 'MyResolver' // WORKING --- wanted to replace with itemData: MyToken
        }
    }
]
}];

2 我的模块代码（摘录）：

export let MyToken: OpaqueToken = new OpaqueToken('my.resolver');    

@NgModule({
        imports: [
            CommonModule,
            ...
        ],
        declarations: [
            MyComponent,
        ],
        providers: [
            {
                provide: 'MyResolver', // WORKING -- wanted to replace with provide: MyToken
                useFactory: (DataService: any) => {
                    return new MyResolverService(DataService);
                },
                deps: [MyInstanceOfDataService]
            }
        ]
    })
    export class MyModule {
    }

3 我的自定义解析器类（摘录）：

@Injectable()
export class MyResolverService implements Resolve<any> {

    constructor(protected DataService: any) {
    }

    resolve(ActivatedRoute: ActivatedRouteSnapshot): Promise<any> {
        return this.DataService.getItem(id).toPromise()
                .then((response: any}) => {
                    return response;
                });
    }
}

不可能用创建的 OpaqueToken（“MyToken” - 当然不带引号）替换字符串（“myResolver”）。不知道为什么。我为多个 Providers 使用了多个 OpaqueToken，但 Resolver 无法使用它。

控制台中的错误消息如下所示，没有更多信息。

错误：必须定义令牌！

有人知道吗？

【问题讨论】：

为什么在resolve: { itemData: 'myResolver' // WORKING itemData: myToken // NOT WORKING 中使用myToken myToken 和小写m 而不是MyToken 和MyResolver？
只是一个错字 - 现在是正确的。
你为什么首先使用令牌？为什么不直接使用服务的类型呢？看起来你把事情复杂化了，同时还在到处使用any。
好吧，我想全局使用“MyResolverService”。考虑 2 个模块，不同的路由，每个模块我都有单独的 DataService 实例（通过 FactoryProvider）。当我在上面的示例中调用“MyResolverService”时，我想注入我的 DataService 实例（请参阅 deps[MyInstanceOfDataService]）以到达正确的 API 端点以在打开组件视图之前获取需要解析的数据。由于全局 ResolverService 我想在路由定义触发解析器时使用 OpaqueToken 以便于处理。
(arg, cannot edit) ...并且为了更容易处理，我想在每个模块中定义一个具有相同名称的 OpaqueToken 以在每个路由定义中使用它，无论当前加载了哪个模块。

标签： angular angular2-routing angular2-providers angular2-opaquetoken angular2-resolve

【解决方案1】：

// import MyResolver and MyToken here

export const routes: Routes = [{
path: 'myPath',
component: MyComponent,
children: [
    {
        path: ':id',
        component: MyComponent,
        resolve: {
            itemData: MyResolver
            itemData: MyToken
        }
    }
]
}];

【讨论】：