单击 routerLink 到子路由角度 2 后，视图不会更改

Question

Hey I'm having this problem and I cant seem to figure out what is wrong, basically I have a routerLink that goes to a child route, the url changes to the route I want but the view doesn't update to the component that is linked to the child route that is currently active

app.component.ts

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

html

<div class="wide component">
    <div class="page-wrap">
        <img class="logo" src="../../assets/img/our-work-component-logo.png"><br>
        <h2>Component Elite</h2>
        <h3>Web portal and promotions</h3>

        <p class="short-description">Lorem Ipsum</p>
        <a routerLink="component" class="button orange-button">View More</a>
    </div>
</div>

app.module.ts

import { OurWorkComponent } from './our-work/our-work.component';
import { ComponentComponent } from './our-work-content/component/component.component'

export const ROUTES: Routes = [
  { path: 'our-work', component: OurWorkComponent,
      children: [
         { path: 'component', component: ComponentComponent }
      ]
  }
];

@ngModule({
  declarations: [
     OurWorkComponent,
     ComponentComponent
  ],
  imports: [
     BrowserModule,
     RouterModule.forRoot(ROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Answer 1

Reason it's not changing is because of children of OurWorkComponent

children: [
    { path: 'component', component: ComponentComponent }
]

This means there should be <router-outlet> in OurWorkComponent , but I can't see it, just add that in OurWorkComponent's html and you are good to go.

---

For more details please do read : https://angular.io/guide/router#nesting-routes