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

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之类的事情，并将config属性设置为“ english” ...，但是每次都未定义this.route.snapshot.params ['config']。 / p>

任何帮助表示赞赏。

Answer 1

在ngOnInit（）上提取参数实际上并没有错，但是在错过路由器出口的位置上却有错（我的假设）。

AppComponent

  

AppComponent是将处理所有子路由的根（路由出口）。

     

如果您获取路由参数，而AppComponent的模板只是不带<router-outlet>的纯HTML，那么您的this.route.snapshot.params['config'];将变得未定义

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

演示输出