Angular2路由组件没有路由配置

您好，我正在尝试为我的应用程序创建路由系统，但在创建没有子路由的路由时，我似乎遇到了一些问题。这是我的密码：

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视图：

<router-outlet></router-outlet>

这是我的仪表板组件：

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

@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]));
     } 
}

这是它的观点：

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

这是左侧导航栏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>

最后，这是CatalogComponent视图：

<router-outlet></router-outlet>

设置了

[routerLink]=“['Catalog']”

的链接将有一类

路由器链接处于活动状态

，但当我尝试单击

[routerLink]=“['Dashboard']”

的链接时，我会遇到以下异常：

查看这段代码让我觉得应该向仪表板组件添加RouteConfig，但我不希望该组件有任何子路由

---

我做错了什么？

似乎不喜欢您在仪表板组件的子级（LeftNavbarComponent）上指定路由，因为它没有子路由。你是说你不想要仪表板组件的子路由，但是你在它的子级中指定了一个路由

你能创建一个Plunker吗？你不需要在CommercifyComponent中导入Dashboard组件和CatalogComponent吗？我省略了导入，因为有很多代码似乎不喜欢你在DashboardComponent的子级（LeftNavbarComponent）上指定路由的事实，它没有子路由。所以你是说你不想要仪表板组件的子路由，但是你在ITApparent的子路由中指定了一个路由。例如，如果我在commercifyComponent中添加一个更高级别的路由链接，它就可以正常工作

<router-outlet></router-outlet>

http://localhost:5000/Catalog/Templates