到組件內部組件的角度路線

Question

我正在構建一個有角度的導航組件，該組件允許用戶轉到App.component內部的組件。 該導航組件也位於App組件內部。 從一開始就顯示了所有組件，我希望導航能夠找到App組件中已經顯示的組件。

我試圖將nav放入經過硬編碼的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元素的儀表板組件，也是我想與組件創建鏈接的地方

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

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

];