sử dụng dịch vụ tiêm để đặt cấu hình APP_BASE_HREF

Question

Tôi đang viết một dự án 2.1.0 góc với loại 2.0.3.

Tôi tạo ra một dịch vụ app-config với đoạn mã sau:

import { Injectable } from '@angular/core'; 

@Injectable() 
export class AppConfigService { 
    public config: any = { 
    auth0ApiKey: '<API_KEY>', 
    auth0Domain: '<DOMAIN>', 
    auth0CallbackUrl: '<CALLBACK_URL>', 
    appBaseHref: '/' 
    } 

    constructor() {} 

    /* Allows you to update any of the values dynamically */ 
    set(k: string, v: any): void { 
    this.config[k] = v; 
    } 

    /* Returns the entire config object or just one value if key is provided */ 
    get(k: string): any { 
    return k ? this.config[k] : this.config; 
    } 
} 

bây giờ tôi muốn sử dụng dịch vụ tiêm vào app-module.ts của tôi để thiết lập các nhà cung cấp APP_BASE_HREF.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { AppComponent } from './app/app.component'; 
import { HelpComponent } from './help/help.component'; 
import { WelcomeComponent } from './welcome/welcome.component'; 
import {APP_BASE_HREF} from "@angular/common"; 
import { MaterialModule } from "@angular/material"; 
import { AUTH_PROVIDERS }  from "angular2-jwt"; 
import { RouterModule } from "@angular/router"; 
import {AppConfigService} from "app-config.service"; 

const appConfigService = new AppConfigService();  

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HelpComponent, 
    WelcomeComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot(), 
    RouterModule.forRoot([ 
     { path: "",redirectTo:"welcome",pathMatch:"full"}, 
     { path: "welcome", component: WelcomeComponent }, 
     { path: "help",component: HelpComponent}, 
     { path: "**",redirectTo:"welcome"} 
    ]) 
    ], 
    providers: [AUTH_PROVIDERS,{provide: APP_BASE_HREF, useValue:appConfigService.get('appBaseHref')}],bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

vì vậy ở đây tôi bắt đầu lớp học thành một const và sử dụng nó. Có cách nào để tiêm là một cách mát mẻ và gợi cảm?

ví dụ cho dịch vụ auth của tôi, tôi định nghĩa nó trong constructor

constructor(@Inject(AppConfigService) appConfigService:AppConfigService) 

là có một cách để làm một điều sexy ở đây quá? hoặc chỉ để rời khỏi nó như là?

nhờ

Answer 1

Bạn có thể sử dụng một nhà máy cho APP_BASE_REF

providers: [ 
    AppConfigService, 
    { 
    provide: APP_BASE_HREF, 
    useFactory: (config: AppConfigService) => { 
     return config.get('appBaseHref') 
    }, 
    deps: [ AppConfigService ] 
    } 
] 

Khi bạn thêm AppConfigService để các nhà cung cấp, nó làm cho nó tiêm cho cả nhà máy và các dịch vụ auth. Đây thường là cách nó nên được thực hiện anyway. Sau đó nếu nói rằng AppConfigService cần một số phụ thuộc có thể, nó sẽ được xử lý thông qua hệ thống phun.

Xem thêm:

• What is the difference between @Inject vs constructor injection as normal parameter in Angular 2? về việc sử dụng @Inject.