Javascript 使用角度路由器在页面内导航视图

我正在创建一个包含多个页面的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 {}

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(){} }

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

页面模板：

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

---

已更新

试试这个

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

ng g c section1
ng g c section2

section1.ts文件

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

类似于第2.ts节文件

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

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

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

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(){} }

@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>

---

将每个组件放在一个新模块中，然后在该模块中定义内部路由，这样无论何时路由到该模块，都可以在内部路由中路由

保持当前路由不变，并声明新模块（在

app.module

中导入这些模块），并在该模块中创建要在该模块中路由的新组件

看看这个：这只是一个供您使用的示例

这里有一个组件在

app.module

和一个名为

intmodule

的模块中，还有两个组件在

intmodule

中。 从

app.module

中，我们可以在

hello.component

和

intmodule

之间进行路由，在

intmodule

中，我们可以在comp1和comp2之间进行路由

---

有关更多帮助的注释：）

您是否正在查找路线以确定要显示的选项卡或每个选项卡上显示的内容？是否要在已发送的页面中进行路线选择？不清楚您试图实现的目标。你是说每个部分都应该有一个url链接吗？比如在有角度的文档页面中？（就像这个链接：）@KautilyaKatiha，是的！我想在已路由的页面中路由。：）我希望每个选项卡的内容都由路由控制，并且我希望这些选项卡位于通过路由器包含的页面上。是的，我知道这可以工作，但动态组件需要后退按钮功能，并且需要更改URL。我可以写我自己的路由器，但我希望使用内置的路由器功能。我相信这是我正在做的，但不起作用。你能举个例子吗？看看我添加的stackblitz。希望这有帮助。