角儿童路线不变

Question

I am designing a website with angular4, and have a component that inside uses the @angular/material sidenav. Within that sidenav i have <router-outlet></router-outlet> .

my app.module has all the necessary imports and declarations, I have a app-routing module that contains the following code for the component:

const appRoutes: Routes = [
  { path: 'reg',
    component: RegComponent,
    children: [
        { path: ':info', component: RegInfoComponent },
        { path: ':ther', component: RegTherComponent }
    ]},
];

I have two span objects to open the sidenav: <span class="label label-info" [routerLink]="['/reg', 'info']" (click)=sidenav.open() style="cursor: pointer;">Info</span>

and <span class="label label-info" [routerLink]="['/reg', 'ther']" (click)=sidenav.open() style="cursor: pointer;">Ther</span>

The sidenav opens fine, but only loads the html template from RegInfoComponent, if i click the ther link, it still loads the html template from RegInfoComponent, but the URL does change.

At first i thought it was maybe because its inside the angular material sidenav, so i placed the <router-outlet></router-outlet> below the link, and it still wouldnt change.

I'm not sure what i've done wrong that the router-outlet is not displaying the correct child information, hoping somebody can help with this? Thanks.

Update

The code for RegInfoComponent:

import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reg-info',
  templateUrl: './reg-info.component.html',
  styleUrls: ['./reg-info.component.css']
})
export class RegInfoComponent implements OnInit {

  constructor(route: ActivatedRoute,
              router: Router) { }

  ngOnInit() {
  }

}

and the code for the RegTherComponent

import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reg-ther',
  templateUrl: './reg-ther.component.html',
  styleUrls: ['./reg-ther.component.css']
})
export class RegTherComponent implements OnInit {

  constructor(route: ActivatedRoute,
              router: Router) { }

  ngOnInit() {
  }

}

Answer 1

I think your router config is incorrect

you are using variable segments with :info and :ther so the first one ( :info ) will always match first (and the RegInfoComponent gets instantiated), and therefore RegTherComponent will never be instantiated

You need to do something like this

<span class="label label-info" [routerLink]="['/reg/info']" (click)=sidenav.open() style="cursor: pointer;">Info</span>
<span class="label label-info" [routerLink]="['/reg/ther']" (click)=sidenav.open() style="cursor: pointer;">Ther</span>

and then the router config should be

const appRoutes: Routes = [
  { path: 'reg',
    component: RegComponent,
    children: [
        { path: 'info', component: RegInfoComponent },
        { path: 'ther', component: RegTherComponent }
    ]},
];