Я пытаюсь разделить код в моем проекте между версией веб-приложения и версией мобильного приложения.

У меня есть компонент, который требует программной навигации, и поэтому мне нужно ввести Angular Router (из @ angular / router) для веб-версии и NativeScript RouterExtensions (из '@ nativescript / angular') для мобильной версии. Есть ли рекомендуемый способ «динамического» внедрения зависимости в компонент, чтобы каждая компилируемая цель получила правильную зависимость?

0
Pablo Oliva 5 Янв 2021 в 18:52

1 ответ

Лучший ответ

На первом этапе вы должны создать токен инъекции

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

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

После этого в вашем модуле, который связан с веб-приложением (я предполагаю, что это 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) {}

И получите роутер для конкретной платформы там, где он вам нужен.

1
Sergey Mell 1 Фев 2021 в 15:39