Как настроить параметр маршрута на корневом URL-адресе приложения Angular - PullRequest
Новая
       37

Как настроить параметр маршрута на корневом URL-адресе приложения Angular

0 голосов
/ 06 декабря 2018

Кажется достаточно простым ... мой app.module выглядит так: 

const appRoutes: Routes = [
  { path: '', component: AppComponent },
  { path: ':config', component: AppComponent }
];


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

и код app.component выглядит следующим образом: 

constructor(private route: ActivatedRoute) {

  }

  config: string;

  ngOnInit() {
    this.config = this.route.snapshot.params['config'];
  }

Я хочу иметь возможность сделать что-то вроде нажатия http://localhost:4200/english и установить для свойства config значение «english» ... но this.route.snapshot.params ['config'] не определяется каждый раз.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 06 декабря 2018

На самом деле нет ничего плохого в том, как вы извлекаете параметры в вашем ngOnInit (), но есть что-то неправильное в том, как вы пропустили установку своего маршрутизатора (мое предположение).

AppComponent

AppComponent - это корневой каталог (маршрутизатор-выход), который будет обрабатывать все ваши дочерние маршруты.

Если вы выбираете параметр маршрута, а шаблон вашего AppComponent представляет собой простой HTML без <router-outlet>, тогда ваш this.route.snapshot.params['config']; станет undefined 

@Component({
  selector: 'app-root',
  template: `I am AppComponent`        // Plain Template without <router-outlet>
})
export class AppComponent {...}

Но если вы поместите <router-outlet> в шаблон вашего AppComponent, тогда ваш this.route.snapshot.params['config']; будет иметь значение, если переданный параметр конфигурации равен '/ english' , тогда его параметр снимказначение 'english' 

@Component({
  selector: 'app-root',
  template: `
     <h1>{{ config }}</h1>
     <router-outlet></router-outlet>     // Add router-outlet
  `        
})
export class AppComponent implements OnInit {

    config: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
       this.config = this.route.snapshot.params['config'];    // 'english' if the url has a supplied param of /english 
    }

}

Создано Stackblitz Demo для вашей справки относительно вашей проблемы

Демонстрационный выход

Demo

...