Question

我正在创建一个包含多个页面的Web应用程序，并且每个页面中都有动态部分。我希望这些部分中的每一个都可以使用角度路由器。

我只是尝试将一个命名的路由器插座放入组件中，但这似乎不起作用...有什么想法吗？

这是我的常规设置。

应用模板

<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之间路由。

评论以获取更多帮助:)

Answer 2

已更新

尝试这个

创建两个单独的组件以显示在主页上

ng g c section1
ng g c section2

section1 .ts文件

@Component({
  selector: 'section1',
  templateUrl: './section1.component.html',
  styleUrls: ['./section1.component.css'],
})

类似的section2 .ts文件

@Component({
      selector: 'section2',
      templateUrl: './section2.component.html',
      styleUrls: ['./section2.component.css'],
    })

然后您可以在主页上使用多个类似的部分/组件

页面模板

<div class="row">
  <div class="col-sm-5">
    <section1></section1> <!-- component selector -->
  </div>
  <div class="col-sm-5">
    <section2></section2>
  </div>
</div>

使用角度路由器浏览页面内的视图

2 个答案: