带路由器插座的角度2儿童路由

当路由变为“main”时，我有一个组件被加载。我在其路由中定义了一个名为'测试'的子路由带路由器插座的角度2儿童路由

当路由设置为main/test时，我希望测试组件在主组件中加载。在主要组件内部，我有一个路由器插座来显示子组件。

这里是我的main.routes.ts：

import { Route } from '@angular/router'; 
    import { MainComponent } from './main.component'; 
    import { TestComponent } from './test/test.component'; 
    import { SessionGuard } from '../../services/session/session.guard'; 

    export const MainRoutes: Route[] = [ 
     { 
     path: 'main', 
     component: MainComponent, 
     canActivate: [SessionGuard], 
     children: [ 
     { path: 'test', component: TestComponent } 
    ] 
    } 
];

在主要部件html的我：

Main 
<router-outlet></router-outlet>

我得到的错误是：不能匹配任何路由主/测试

按钮，触发路由变化：

<button type="button" class="btn btn-default" (click)="changeRoute('main/test');" >Test</button>

方法来改变路线：

changeRoute(route: string) { 
    event.stopPropagation(); 
    this.router.navigate([route]); 
}

感谢

来源

2016-10-22 Pete

你怎么重定向到测试？它是一个默认的子路由wihin maincomponent？ – micronyks

是的，它是一个儿童组件。主要我有。我使用一个按钮来重定向，也尝试只用地址栏。 – Pete

那么请同时发布按钮的工作方式？你的代码是什么？ – micronyks

router-outlet不能为空。这意味着当您重定向到主要组件时，您没有任何默认的子路由器集。你只需要设置如下图所示，

export const MainRoutes: Route[] = [ 
     { 
     path: 'main', 
     component: MainComponent, 
     canActivate: [SessionGuard], 
     children: [ 
        {path:'',redirectTo:'test', pathMatch: 'full'}, 
        {path: 'test', component: TestComponent } 
    ]

如果你想重定向到test与按钮的点击事件只有这样，你应该使用下面的配置，

export const MainRoutes: Route[] = [ 
     { 
     path: 'main', 
     component: MainComponent, 
     canActivate: [SessionGuard], 
     children: [ 
        {path:'',component:null},  //<<<<### here with null value 
        {path: 'test', component: TestComponent } 
    ]

来源

2016-10-22 12:17:08 micronyks

带路由器插座的角度2儿童路由

回答

相关问题