Angular 路由到组件内部的组件

Question

我正在 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>

这是我的应用程序-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
    },
  ]
 }
];

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

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

控制台打印出这三个错误，因为 router-outlet 是在应用程序组件（父）上定义的：

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!

Answer 1

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

App.component.html

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

应用-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
    }

];

Angular 路由到组件内部的组件

Angular routes to components inside a component

routes

nested-routes

angular