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

Question

Seems simple enough... my app.module looks like this:

 const appRoutes: Routes = [ { path: '', component: AppComponent }, { path: ':config', component: AppComponent } ]; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, RouterModule.forRoot(appRoutes) ], providers: [], bootstrap: [AppComponent] }) 

and the app.component code looks like this:

 constructor(private route: ActivatedRoute) { } config: string; ngOnInit() { this.config = this.route.snapshot.params['config']; } 

I want to be able to do something like hit http://localhost:4200/english and have the config property set to 'english'... but this.route.snapshot.params['config'] is undefined every time.

Any help appreciated.

Answer 1

There's actually nothin wrong of how you extract the params on your ngOnInit() but there's something wrong of how you missed to place your router-outlet (my assumption).

AppComponent

AppComponent is the root (router-outlet) that will handle all of your child routes.

If you are fetching your route parameter and your AppComponent's Template is just a Plain HTML without the <router-outlet> then your this.route.snapshot.params['config']; will become undefined

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

But if you will place the <router-outlet> on your AppComponent's Template, then your this.route.snapshot.params['config']; will have a value, if the passed config parameter is '/english' then its snapshot param value is '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 
    }

}

---

Had created Stackblitz Demo for your reference in regards to your concern

Demo Output