Угловые маршруты к компонентам внутри компонента - PullRequest
Новая
       24

Угловые маршруты к компонентам внутри компонента

0 голосов
/ 30 января 2019

Я создаю навигационный компонент в угловом формате, который позволяет пользователю перейти к компоненту внутри App.component.Этот навигационный компонент также находится внутри компонента 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!

1 Ответ

0 голосов
/ 17 апреля 2019

Хитрость в том, чтобы создать компоненты макета и вызвать его в 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
    }

];
...