单击 routerLink 到子路由 angular 2 后视图不会改变

Question

嘿，我遇到了这个问题，我似乎无法弄清楚出了什么问题，基本上我有一个 routerLink 去一个子路由，url 更改为我想要的路由，但视图没有更新链接到当前活动的子路由的组件

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

它没有改变的原因是因为children 的OurWorkComponent

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

这意味着OurWorkComponent 中应该有<router-outlet>，但我看不到，只需在OurWorkComponent's 中添加html 即可。

---

更多详情请阅读：https://angular.io/guide/router#nesting-routes