如何解决在单个组件中使用 Router for web 和 RouterExtensions for mobile
我正在尝试在我的项目中在网络和移动应用版本之间共享代码。
我有一个需要编程导航的组件,因此我需要为 Web 版本注入 Angular Router(来自“@angular/router”),为移动版本注入 NativeScript RouterExtensions(来自“@nativescript/angular”)。有没有推荐的方法来“动态”将依赖项注入到组件中,以便为每个编译的目标获得正确的依赖项?
解决方法
第一步你应该创建一个注入令牌
// 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: [...],useClass: RouterExtensions},schemas: [NO_ERRORS_SCHEMA],})
export class AppModule {}
完成此操作后,您可以通过 @Inject
装饰器(如
constructor(@Inject(UNIVERSAL_ROUTER) private router) {}
并在任何需要的地方获取特定于平台的路由器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。