如何在 Angular 应用程序根 URL 上配置路由参数

Question

看起来很简单...我的 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 之类的操作并将配置属性设置为“english”...但是 this.route.snapshot.params['config'] 每次都未定义。

任何帮助表示赞赏。

Answer 1

实际上，您在 ngOnInit() 上提取参数的方式并没有错，但是您错过放置路由器插座的方式有问题（我的假设）。

应用组件

AppComponent 是处理所有子路由的根 (router-outlet)。

如果您正在获取路由参数并且您的 AppComponent 的模板只是一个没有 <router-outlet> 的纯 HTML，那么您的 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'，那么它的快照参数值为'英语'

@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 供您参考

演示输出