Как получить QueryParam у провайдера фабрики (Angular4)

Question

Я хочу предоставить константу в моем приложении на основе QueryParam из URL.

localhost:4200?flag=true

В моем модуле провайдеры я добавил

{ provide: FLAG, useFactory: FlagFactory, deps: [...] }

Так что мне интересно, если есть способ, как сделать это без разбора URL-адреса вручную

function FlagFactory() {
  return location.search.includes('flag');
}

Answer 1

Как насчет использования Angular Router?

Маршрутизатор отслеживает параметры запроса, поэтому они должны быть доступны на начальном маршруте '/'

Ваш корневой компонент может иметь маршрут, который позволяет это

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.flag = params['flag']; 

    });
  }

Answer 2

Я смог сделать это, используя решимость Angular. Resolve позволяет вам получить доступ к параметрам маршрута и запроса ДО того, как будет загружен ваш компонент маршрута.

В вашем случае я бы создал класс резолвера, который выглядит примерно так:

@Injectable()
export class FlagRouteResolver implements Resolve<any> {
    constructor(private flagService: FlagService) {}

    resolve(route: ActivatedRouteSnapshot) {
        this.flagService.isFlagged = route.queryParamMap.get('flag');

        // Need to return an observable for all resolve() methods
        return Observable.of(null);
    }
}

И ваш AppModule должен выглядеть примерно так:

@NgModule({
    imports: [
        RouterModule.forRoot([{
            path: 'flagRoute',
            component: FlagComponent,
            resolve: { test: FlagRouteResolver }
        }]),
    ],
    providers: [
        FlagService,
        FlagRouteResolver
    ],
    declarations: [
        FlagComponent
    ]
})

Так что теперь, внутри вашего компонента маршрута, вы должны иметь возможность немедленно получить доступ к этому значению в конструкторе следующим образом:

constructor(private flagService: FlagService) {
    this.isFlagged = this.flagService.isFlagged;
}

Но если вы все еще хотите ввести его, вы также можете сделать это так:

providers: [{
    provide: FLAG,
    useFactory: (flagService: FlagService) => {
        return this.flagService.isFlagged;
    },
    deps: [FlagService]
}]