Компонент Angular2 route не имеет конфигурации маршрута

Question

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

bootstrap(CommercifyComponent, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
]); 

@Component({              
    selector: 'commercify', 
    templateUrl: './app/commercify.view.html', 
    styleUrls: ['./app/commercify.style.css'], 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    { path: '/Dashboard', name: 'Dashboard', component: DashboardComponent },  
    { path: '/Catalog/...', name: 'Catalog', component: CatalogComponent, useAsDefault : true } 
])   
export class CommercifyComponent {} 

Это мое мнение CommercifyComponent:

Это мой DashboardComponent:

@Component({ 
    selector: 'dashboard', 
    template: '<base-component>This is dashboard component</base-component>', 
    directives: [BaseComponent, ROUTER_DIRECTIVES] 
}) 
export class DashboardComponent { } 

Это базовый компонент userd в приборной панели:

@Component({ 
    selector: 'base-component', 
    templateUrl: 'app/common/components/base.view.html', 
    styleUrls: ['app/common/components/base.style.css'], 
    directives: [LeftNavbarComponentt] 
}) 
export class BaseComponent { } 

И это его вид:

<left-navbar></left-navbar> 
<ng-content></ng-content> 

Это LeftNavbarComponent:

@Component({ 
    selector: 'left-navbar', 
    templateUrl: 'app/common/components/left-navbar.view.html', 
    styleUrls: ['app/common/components/left-navbar.style.css'], 
    directives: [ROUTER_DIRECTIVES] 
})  
export class LeftNavbarComponent { 
    private router: Router; 

    constructor(router: Router) { 
     this.router = router; 
    } 

    public isRouteActive(routeName: string) { 
     return this.router.isRouteActive(this.router.generate([routeName])); 
    } 
} 

Это левый Navbar HTML:

<nav class="left-navbar navbar-inverse navbar"> 
<ul class="list-unstyled"> 
    <li class="text-center menu-item"> 
     <a href="" 
      class="navbar-link left-navbar-link" 
      [class.navbar-link-active]="isRouteActive('Dashboard')" 
      [routerLink]="['Dashboard']"> 
      <i class="menu-icon fa fa-tachometer fa-3x"></i> 
      <span class="left-arrow"></span> 
      Dashboard 
     </a> 
     <ul class="child-menu list-unstyled"> 
      <li>Dashboard 1</li> 
      <li>Dashboard 1</li> 
      <li>Dashboard 1</li> 
     </ul> 
    </li> 
    <li class="text-center menu-item"> 
     <a href="" class="navbar-link left-navbar-link" 
      [class.navbar-link-active]="isRouteActive('Catalog')" 
      [routerLink]="['Catalog']"> 
      <i class="menu-icon fa fa-shopping-basket fa-3x"></i> 
      <span class="left-arrow"></span> 
      Catalog 
     </a> 
    </li> 
</ul> 

Это каталог компонент:

@Component({ 
    templateUrl: './app/catalog/catalog.view.html', 
    directives: [ROUTER_DIRECTIVES, BaseComponent] 
}) 
@RouteConfig([ 
    { path: '/Templates', name: 'Templates', component: TemplatesComponent, useAsDefault: true }, 
])          
export class CatalogComponent {} 

И, наконец, это вид по CatalogComponent:

<router-outlet></router-outlet> 

Как видно из кода моего CommercifyComponent имеет 2 маршрута сконфигурированной Dashboard, который никогда не будет иметь ребенок маршрута и каталог, который имеет 1 ребенок маршрут шаблон для которого я пропустил остальную часть кода, потому что он не имеет отношения к текущему вопросу.

По умолчанию при загрузке приложения I будет принят к следующему адресу:

http://localhost:5000/Catalog/Templates 

и ссылке, установивший [routerLink]="['Catalog']" будет иметь класс router-link-active, но когда я пытаюсь нажать на ссылку с [routerLink]="['Dashboard']" I получить следующие исключения:

Глядя на этот код делает меня вещь, что я должен добавить RouteConfig к DashboardComponent, но я не ва nt иметь дочерние маршруты для этого компонента.

Что я здесь делаю неправильно?

Answer 1

Похоже, вам не нравится тот факт, что вы указываете маршрут на дочернем (LeftNavbarComponent) DashboardComponent, который не имеет дочерних маршрутов. Итак, вы говорите, что не хотите дочерних маршрутов компонента панели инструментов, но вы указываете маршрут в дочернем элементе