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

我正在尝试在我的项目中在web和移动应用程序版本之间进行代码共享

---

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

在第一步中，您应该创建一个注入令牌

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

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

同时，您将此令牌定义为模块中的

RouterExtension

，该模块为移动应用程序（即

app.module.tns.ts

）声明：

完成此操作后，您可以像decorator一样通过

@inject

注入路由器

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

---

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

谢谢@Sergeymell不客气！很高兴我能帮忙

// 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 {}

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