在单个组件中使用 Router for web 和 RouterExtensions for mobile答案

【问题标题】：Using Router for web and RouterExtensions for mobile in a single component在单个组件中使用 Router for web 和 RouterExtensions for mobile
【发布时间】：2021-01-05 15:52:58
【问题描述】：

我正在尝试在我的项目中在 Web 和移动应用版本之间共享代码。

我有一个需要编程导航的组件，因此我需要为 Web 版本注入 Angular 路由器（来自“@angular/router”），为移动版本注入 NativeScript RouterExtensions（来自“@nativescript/angular”）。是否有推荐的方法将依赖项“动态”注入到组件中，以便为其编译的每个目标都获得正确的依赖项？

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

第一步你应该创建一个注入令牌

// src/app/tokens.ts
import {InjectionToken} from '@angular/core';

export const UNIVERSAL_ROUTER = new InjectionToken<string>('Custom router');

在与 Web 应用程序相关的模块中（我假设它是 app.module.ts）之后，您在提供程序列表中定义它

// src/app/app.module.ts
...
import {Router, RouterModule} from '@angular/router';
import {UNIVERSAL_ROUTER} from '~/app/tokens';

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [
        {provide: UNIVERSAL_ROUTER, useExisting: Router},
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

同时，您在声明移动应用程序的模块中将此令牌定义为RouterExtension（即app.module.tns.ts）：

// src/app/app.module.tns.ts
...
import {NativeScriptRouterModule, RouterExtensions} from 'nativescript-angular/router';
import {UNIVERSAL_ROUTER} from '~/app/tokens';

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [
        {provide: UNIVERSAL_ROUTER, useClass: RouterExtensions},
    ],
    bootstrap: [AppComponent],
    schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

完成后，您可以通过@Inject 装饰器之类的方式注入路由器

constructor(@Inject(UNIVERSAL_ROUTER) private router) {}

并在任何需要的地方获取特定于平台的路由器。

【讨论】：

谢谢@SergeyMell