javascript - 如何将 Angular 组件与根组件分组，就像应用程序组件的工作方式一样

Question

我有一些组件都在帐户下。

• 用户名
• 密码
• 个人资料
• ...

我想要一个父组件，就像 app-component 那样有效，具有 <router-outlet></router-outlet> ，这样父组件的主要 html 永远不会改变，但 <router-outlet></router-outlet> 的内容会改变。 .

我该如何解决这个问题？

Answer 1

您可以定义组件路由，例如

const appRoutes: Routes = [
  { path: '/main', component: appComponent },
  { path: 'login/:id',      component: LoginComponent },
  {
    path: 'users',
    component: userListComponent,
    data: { title: 'User List' }
  },
  { path: '',
    redirectTo: '/users',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

然后在你的appComponent.html

<h1>your html</h1>
<router-outlet></router-outlet>
<h1>your html</h1>

https://angular.io/guide/router