首页 文章

RouterConfig有多个组件（@ angular / router：3.0.0-beta.2）

提问于
浏览 次
1

是否可以使用此更新的角度路由器将RouterConfig绑定到不同的组件？

例如，我的“app.components.ts”上有两个组件：

@Component({
    template: require('./app.component.html'),
    directives: [ ROUTER_DIRECTIVES ]
})

此组件中的模板包括子组件的自定义视图装饰路由器插座 .

export const insideRoutes: RouterConfig = [
   { path: 'dashboard', component: DashboardComponent }
];

并拥有自己的路由器，将在指定的路由上加载此组件 .

我也有顶级组件：

@Component({
   selector: 'app',
   pipes: [],
   providers: [ AppState ],
   template: '<router-outlet></router-outlet>',
   directives: [ ROUTER_DIRECTIVES ]
})

此组件中的模板将只具有自定义（登录）页面 .

export const outsideRoutes: RouterConfig = [
   { path: 'login', component: LoginComponent }
)}

我想加载这个组件，只使用上面的RouterConfig上的路由 .

我试图在“app.routes.ts”中包含两个RouterConfig，如下所示：

export const appRouterProviders = [
   provideRouter([outsideRoutes, insideRoutes])
];

将“appRouterProviders”链接到“main.browser.ts”中的应用程序引导程序：

export function main(initialHmrState?: any): Promise<any> {
   return bootstrap(AppComponent, [
     ...PROVIDERS,
     ...DIRECTIVES,
     ...PIPES,
     ...APP_PROVIDERS,
     ...ENV_PROVIDERS,
     ...HTTP_PROVIDERS,
     appRouterProviders,
     provide(LocationStrategy, { useClass: HashLocationStrategy })
   ]).catch(err => console.error(err));
}

但得到路由器错误 .

如果我只使用一个RouterConfig，那样：

export const appRouterProviders = [
   provideRouter(outsideRoutes) // or insideRoutes
];

它工作，但它只使用我的根组件（顶级组件，只有路由器插座 .

至少我使用旧的和有用的@RouteConfig在“angular2：2.0.0-beta.14”上完成了这项工作 .

angular angular2-routing

2 回答

  • 0

    也许我得到了你错误的原因 . 你应该将2个RouteConfigs组合成1，而不是 provideRouter([outsideRoutes, insideRoutes]) 更好的方法来使用扩展运算符 ... ：

    export const appRouterProviders = [
  provideRouter([...outsideRoutes, ...insideRoutes])
];
    回复于
  • 0

    好吧，我要在“app.component.ts”中将路由分离到不同的组件而不是多个RouterConfig .

    创建了“中间”组件，它将重定向到子组件 . 称之为“菜单”oO .

    根组件（app.component.ts）只有一个顶级组件：

    @Component({
   selector: 'app',
   pipes: [],
   providers: [ AppState ],
   template: '<router-outlet></router-outlet>',
   directives: [ ROUTER_DIRECTIVES ]
})

    这里我将只显示登录页面（LoginComponent） .

    从“LoginComponent”我将重定向到“AppMenuComponent” . 此菜单组件具有旧模板（模板：require（' . / app.component.html'） - 具有自定义装饰和用于子组件的自己的路由器插座） . 这就是它的样子：

    @Component({
    template: require('./app.component.html'),
    directives: [ ROUTER_DIRECTIVES ]
})

    它是一个单独的文件，名为“app-menu.component.ts” .

    最后一步 - RouterConfig（在“app.routes.ts”中）：

    export const routes: RouterConfig = [
  { path: 'login', component: LoginComponent },
  { path: 'menu', component: AppMenuComponent,
    children: [
      { path: '', component: AppMenuComponent },
      { path: 'dashboard', component: DashboardComponent }
    ]
  }
];

    就像我说的，登录页面后，将加载“菜单”组件 . 它将包含将使用“Menu”组件的路由器插座的所有子组件，而不是顶级组件路由器插座 .

    回复于

相关问题