到组件内的组件的角度路由答案

【问题标题】：Angular routes to components inside a component到组件内的组件的角度路由
【发布时间】：2019-06-23 20:41:03
【问题描述】：

我正在构建一个 Angular 导航组件，它允许用户转到 App.component 内的组件。这个导航组件也在 App 组件内部。从一开始就显示所有组件，我希望导航能够找到 App 组件中已经显示的组件。

我尝试将导航放在硬编码的 App 组件中，但没有成功。

这是我调用所有组件的 App.component.html，这是父组件。

<app-slideshow></app-slideshow>
<!--others-->
<app-dashboard></app-dashboard>  //<-- component where the nav is
<router-outlet></router-outlet>

这是我的 app-routing.module.ts，我在其中定义了到组件的路由

const parentModuleRoutes: Routes = [
{
  path: 'home',            //<---- parent component declared here
  component: AppComponent,
  children: [                          //<---- child components 
declared here
      {
          path:'slideshow',
          component: SlideshowComponent
      },
      {
          path:'about',
          component: AboutComponent
      },
      {
          path:'service',
          component: ServiceComponent
      },
      {
          path:'explore',
          component: WorksComponent
      },
      {
        path:'contact',
        component: ContactComponent
    },
  ]
 }
];

这是构建导航元素的仪表板组件，我想在其中创建与组件的链接

<nav>
<ul>
  <li>
  <a routerLink="/home/slideshow">
    <p>Home</p>
  </a>
</li>
<li>
  <a routerLink="/home/about">
    <p>About Us</p>
  </a>
</li>
<li>
    <a routerLink="/home/service">
      <p>Service</p>
    </a>
  </li>
  <li>
    <a routerLink="/home/explore">
      <p>Explore</p>
    </a>
  </li>
  <li>
    <a routerLink="/home/contact">
      <p>Contact Us</p>
    </a>
  </li>
</ul>
</nav>

控制台打印这三个错误，因为路由器出口是在应用组件（父）上定义的：

ERROR Error: StaticInjectorError(AppModule)[RouterOutlet -> 
ChildrenOutletContexts]: 
StaticInjectorError(Platform: core)[RouterOutlet -> 
ChildrenOutletContexts]: 
NullInjectorError: No provider for ChildrenOutletContexts!

ERROR CONTEXT DebugContext_
View_AppComponent_0 @ AppComponent.html:16


Error: StaticInjectorError(AppModule)[RouterOutlet -> 
ChildrenOutletContexts]: 
StaticInjectorError(Platform: core)[RouterOutlet -> 
ChildrenOutletContexts]: 
NullInjectorError: No provider for ChildrenOutletContexts!

【问题讨论】：

如果你只有一个路由器插座，你可以直接使用 Angular 的路由器。你不需要嵌套任何东西。只需删除“home”路由并在您的app-routing.module.ts 中声明顶级路由。
您是否在 RouterModule 导入中使用了 forRoot？
所以我尝试了你的想法@tommueller，但每次我“点击”一个链接时，它都会在页面的最后生成组件（app.component），我希望链接转到组件那在 app.component 里面。
@TusharWalzade 我在导入中使用了“RouterModule.forChild(parentModuleRoutes)”

标签： angular routes nested-routes

【解决方案1】：

诀窍是创建布局组件并在 app.component 中调用它，因此当您想更改为另一个带有导航栏的组件时，您可以使用它转到 /about 或 /service，然后更改其余部分布局。

App.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-routing.module.ts

const parentModuleRoutes: Routes = [
      {
          path:'slideshow',
          component: SlideshowComponent
      },
      {
          path:'about',
          component: AboutComponent
      },
      {
          path:'service',
          component: ServiceComponent
      },
      {
          path:'explore',
          component: WorksComponent
      },
      {
        path:'contact',
        component: ContactComponent
    }

];

【讨论】：