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

Answer 2

您可以使用children或loadChildren（For Lazy Loading）概念。

export const AppRoutes:Routes = [
   {path: 'account', component: AccountComponent, children: [
             {path: 'login', component: LoginComponent},
             {path: 'profile', component: ProfileComponent}
]

在AccountComponent中，您可以添加所有常见的API和逻辑

在AccountComponentTemplate中，添加<router-outlet></router-outlet>

使用角度模块化概念以获得更好的维护。

Answer 3

Define your routes something like this:

const appRoutes: Routes = [
{ path:"", component: HomeComponent},
{ path:"accounts", component: AccountComponent, children:[
    { path:"user", component: UserComponent},
    { path:"password", component: PasswordComponent},
    { path:"profile", component: ProfileComponent}
]},
];

Define a <router-outlet> at root level as well as at child level. For child you can define it inside AccountComponent.html file.

Answer 4

你可以遵循这样的事情，这将有助于你实现你所需要的。

<强> app.routing.ts

      export const AppRoutes: Routes = [{
      path: '',
      component: PARENTcomponentName1,
      children: [
      {path: 'PATH1', loadChildren: 'MODULE_PATH'}
      //more path
      ]},
      {
        path: '',
      component: PARENTcomponentName2,
      children: [
      {path: 'PATH@', loadChildren: 'MODULE_PATH'},
      ]}}]

如何使用根组件对角度组件进行分组，就像App-Component的工作方式一样

4 个答案: