首页 文章

当路径为空时，为什么赢得了't child component render in parent'的路由器插座？

提问于
浏览 次
1

我是Angular的新手，并尝试配置路由 . 我在FeatureModule中定义了路由，并且功能模块由选择器加载到应用程序中 .

我的理解是，空路径''将导致指定的组件在其父路由器插座中呈现 . 然而，这不是正在发生的事情 .

请参阅此问题的Stackblitz演示：Routing Issue Live Demo

我的FeatureModule中的路由定义为：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
    {
      path: '',
      component: ChildComponent
    }
]}
];

HomeComponent（“功能主页工作！”）正确呈现 . 我希望在HomeComponent的路由器插座中渲染ChildComponent，但事实并非如此 .

我在路由器插座上方添加了一些文本，以便于可视化我期望呈现ChildComponent的位置：

[feature child should be rendered here]
  <router-outlet></router-outlet>

有人能帮助我理解为什么ChildComponent没有渲染吗？

谢谢！

（P.S.我在Stackblitz的组件和路由器插座中添加了一些div和CSS，以便更好地可视化它们） .

angular angular-routing

2 回答

  • 0

    只要特征模块的路由模块中有子阵列，您就需要至少有两个路由器出口 - 一个用于注入父级（在应用级别），另一个用于注入其子级 .

    如您所述，您的主组件使用其选择器注入应用程序 . 在这种情况下，您不需要它出现在任何路由器模块内部，因为无论路径是什么，它都会被注入到应用程序中 .

    另外需要注意的是，由于您没有app-routing.module.ts，因此在功能路由模块中，您需要将说出RouterModule.forChild（路由）的行更改为forRoot，因为您首先需要forRoot .

    更新了插件 - https://stackblitz.com/edit/angular-g8rdev-ng6routing-azv6rp?file=src/app/feature/feature-routing.module.ts

    回复于
  • 1

    您为同一路径配置了两个组件 . 尝试：

    const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
    {
      path: 'child',
      component: ChildComponent
    }
]}
];
    回复于

相关问题