javascript - 使用 angular-router 在页面中导航 View

Question

我正在创建一个包含多个页面的 Web 应用程序，每个页面中都有动态部分。我希望每个部分都使用 Angular 路由器。

我试过简单地在组件中放置一个命名的路由器 socket ，但它似乎不起作用......有什么想法吗？

这是我的一般设置。

应用模板

<main>
  <router-outlet></router-outlet>
</main>

应用模块

const routes: Routes = [
 { 
  path: 'page', 
  component: PageModule
 }
];

@NgModule({
  imports: [PageModule, RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

页面模板:

<tabset>
  <tab>
    <router-outlet name="section1"></router-outlet>
  </tab>
  <tab>
    <router-outlet name="section2"></router-outlet>
  </tab>
</tabset>

页面模块

const routes: Routes = [
  {
    path: '',
    component: PageComponent,
  },
  {
    path: 'section1-view1',
    component: View1Component,
    outlet: 'section1',
  },
  {
    path: 'section1-view2',
    component: View2Component,
    outlet: 'section1',
  }
  // More routes ...
];

@NgModule({
  declarations: [
    PageComponent,
    View1Component,
    View2Component
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    TabsetModule
  ]
})
export class PageModule { constructor(){} }

Answer 1

在新模块中创建每个组件，然后在该模块中定义内部路由，因此无论何时路由到该模块，都可以在内部路由中路由。

保持当前路由不变，并声明新模块(在 app.module 中导入这些模块)，并在该模块内创建您希望在该模块中路由的新组件。

检查一下:Stackblitz只是供您使用的示例。

app.module 中有一个组件，intmodule 中有一个组件，intmodule 中有两个组件。 从 app.module 我们可以在 hello.component 和 intmodule 之间路由，在 intmodule 中我们可以在 comp1 之间路由和 comp2。

评论以获得更多帮助:)