Question

我想构建一个角度4应用程序，它包含两个不同的子应用程序：main-app和admin-app。我正在考虑使用一个自举的app组件，模板中只有<router-outlet>：

app.component
模板：<router-outlet></router-outlet>
路线：
“main”=＆gt;主应用
“admin”=＆gt;管理员应用内

主应用程序在模板中有一个路由器插座和一个命名的路由器插座，我希望同时显示不同的组件。
的主app.component
模板：<router-outlet></router-outlet><router-outlet name='action'></router-outlet>
路线：
“content”=＆gt; content.component
“action”=＆gt; action.component（显示在动作路由器插座中）

我的问题是“动作”路线不起作用，即它不显示访问http://localhost:4200/main/app(action:action)或http://localhost:4200/main/app/content(action:action)时，操作路由器插座中的action.component，但会出现异常：

错误：无法匹配任何路线。网址细分：'动作'

我的实际路线如下：
app-routing.module

const routes: Routes = [
  {
    path: 'main',
    loadChildren: "app/main-app/main-app.module#MainAppModule",
  },
  {
    path: 'admin',
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule",
  },
]

main-app-routing.module

const routes: Routes = [
  {
    path: "",
    redirectTo: "app",
    pathMatch: "full"
  },
  {
    path: "app",
    component: MainAppComponent,
    children: [
      {
        path: "content",
        component: ContentComponent
      },
      {
        path: "action",
        outlet: "action",
        component: ActionComponent
      }
    ]
  }
]

我的问题：
如何指定路线才能使其正常工作？是否有另一种推荐方法来构建包含两个子应用程序的应用程序？

谢谢！

Answer 1

我想出了如何实现：

使用网址：
invalidate()
它有效！

routerLink必须如下所示：
http://localhost:4200/main/app/(content//action:action)

这是 main-app.component.html ：

<a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a>

也许有人知道另一个/更好的解决方案？

Answer 2

我没有一个命名的路由器插座，而是实际上有嵌套的路由组件。所以你的主AppComponent只有一个路由器插座。你的应用程序的路由很好，就像你拥有它一样：

const routes: Routes = [
  {
    path: 'main',
    loadChildren: "app/main-app/main-app.module#MainAppModule",
  },
  {
    path: 'admin',
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule",
  },
]

但现在您为两个子应用程序创建了两个单独的模块。例如，MainApp看起来像这样：

const mainAppRoutes: Routes = [
  {
    path: 'main',
    component: MainAppComponent,
    children: [
      {
        path: "content",
        component: ContentComponent
      },
      {
        path: "action",
        outlet: "action",
        component: ActionComponent
      }
    ]
  }


@NgModule({
  imports: [
    RouterModule.forChild(mainAppRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class MainAppModule { }


@Component({
  template:  `
    <h2>Main App</h2>
    <router-outlet></router-outlet>
  `
})
export class MainAppComponent { }

请注意，这些路由具有嵌套的子路径数组。这些路由实际上将插入到MainAppComponent路由器插座中，而不是插入到AppComponent路由器插座中。然后，您可以使用RouterModule.forChild（）方法将这些路由导入MainAppModule。这个设置仍然适用于我们的延迟装载，我认为这将使您的区域更清晰。

如何为子组件中的命名路由器出口定义路由

2 个答案: