Question

是否可以使用此更新的角度路由器将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”的工作。

Answer 1

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

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

Answer 2

好吧，我会在＆＃34; app.component.ts＆＃34;中将路由分离到不同的组件而不是多个RouterConfig。

创建＆＃34;中间＆＃34;组件，将重定向到子级。叫它＆＃34;菜单＆＃34; OO。

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

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

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

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

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

这是一个单独的文件，名为＆＃34; app-menu.component.ts＆＃34;。

最后一步 - RouterConfig（＆＃34; app.routes.ts＆＃34;）：

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

就像我说的，登录页面后，＆＃34;菜单＆＃34;组件将被加载。它将包含将使用＆＃34;菜单＆＃34;的路由器插座的所有子组件。组件，而不是顶级组件路由器插座。

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

2 个答案: