Угловой 4 - Дочерние маршруты и использование двух точек маршрута - PullRequest
Новая
       39

Угловой 4 - Дочерние маршруты и использование двух точек маршрута

0 голосов
/ 13 декабря 2018

Я уже прочитал все решения по этому поводу на портале, но не смог найти правильное решение.Вот как это выглядит:

У меня есть один компонент: 

import {Component} from '@angular/core';

@Component({
  selector: 'component-one',
  template: 'Component One'
})
export class ComponentOne { 

}

и два дочерних компонента: 

import { Component } from '@angular/core';

@Component({
  selector: 'child-one',
  template: 'Child One'
})
export class ChildOne { 
}

import { Component } from '@angular/core';

@Component({
  selector: 'child-two',
  template: `

    <nav>
      <a [routerLink]="['child-one']">Child One</a><br />
      <a [routerLink]="['child-two']">Child two</a><br />
    </nav>
  <router-outlet></router-outlet>
  `
})
export class ChildTwo { 
}

Чего я хочу достичь, когда вы нажимаете на ComponentOneМаршрут заключается в том, что я перенаправлен на дочерний компонент, который содержит шаблон с другим выходом маршрутизатора.

Вот как выглядят маршруты: 

import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';
import ChildOne from './child-one';
import ChildTwo from './child-two';

export const routes: Routes = [
  { path: '', redirectTo: 'component-two', pathMatch: 'full' },
  { path: 'component-two', component: ComponentTwo },
  { path: 'component-one', component: ComponentOne,
    children: [
      { path: '', redirectTo: 'child-two', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(routes);

В app.component.html у меня есть:

import {Component} from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app',
  template: `
    <nav>
      <a [routerLink]="['/component-one']">Component One</a>
      <a [routerLink]="['/component-two']">Component Two</a>
    </nav>


    <div style="color: green; margin-top: 1rem;">Outlet:</div>
    <div style="border: 2px solid green; padding: 1rem;">
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {

}

У меня ошибка: Uncaught (в обещании): Ошибка: не удается найти первичный выход для загрузки 'ChildTwo' Ошибка: не удается найти первичный выход для загрузки 'ChildTwo'

Кто-нибудь знает в чем проблема?Я добавил розетку маршрутизатора внутри компонента child-two, а также внутри app.component.

Если кому-то нужно знать, это структура приложения: enter image description here Спасибо!

1 Ответ

0 голосов
/ 14 декабря 2018

Как указано в комментарии, вашему ComponentOne требуется <router-outlet>.Вы указываете Angular в конфигурации маршрутизатора, что у ComponentOne есть дочерние (дочерние маршруты), но нет выхода для его рендеринга.

Иногда это не проблема, которую вы сразу увидите - но у вас включен fullRedirect'', поэтому состояние проблемы вызывается немедленно.

Короче говоря, если у данной конфигурации маршрута есть дочерние элементы, этому компоненту требуется выход маршрутизатора.

...