0

我正在开发一个单页应用程序，其中可以在单个模板中加载多个反应式表单。有独特的路线连接到这些表单组件。可以当显示一个表单时不显示另一个表单，因为一次只有一个路由可以匹配到一个组件。

为了简化，让我们考虑有：

  1. 两个路由器链接 - “查看”和“编辑”
  2. 两个组件 -ViewComponent和EditComponent
  3. 两个路由器插座 -在页面viewOutlet上editOutlet相邻显示。

单击“视图”链接时，必须将 ViewComponent 加载到 viewOutlet 内，单击“编辑”链接时，必须将 EditComponent 加载到 editOutlet 内。在这里，当显示 viewComponent 时，editOutlet 为空是可以接受的，反之亦然。

我还在这里创建了一个 stackblitz -

预览- https://angular-pbyijh.stackblitz.io/app/main

代码- https://stackblitz.com/edit/angular-pbyijh

我已根据文档进行了所有代码更改。但是我收到错误消息Cannot match any routes. URL Segment: 'view'

你可能会问我为什么使用路由器插座来显示简单的组件。原因是这个 stackblitz 只是我现实世界应用程序的一个最简单的复制品。我的应用程序中的组件具有表单。当表单很脏并且用户尝试离开它时，我将显示确认“您要放弃更改”。据我所知，如果不涉及路线，这是无法完成的。

代码如下：

app.routing.module.ts

const routes: Routes = [
  {
    path:'',
    component: AppComponent
  }, {
    path:'app',
    loadChildren: './main-app/main-app.module#MainAppModule',
  }
];

main-app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'main'
  }, {
    path: 'main',
    component: MainAppComponent,
    children: [
      {
        path: 'view',
        component: ViewComponent,
        outlet: 'viewOutlet'
      },       {
        path: 'edit',
        component: EditComponent,
        outlet: 'editOutlet'
      }

    ]
  }
];

main-app.component.html中的路由器出口段

<div class="parent">
  <div class="block">
    <router-outlet name="viewOutlet"></router-outlet>
  </div>

  <div class="block">
    <router-outlet name="editOutlet"></router-outlet>
  </div>
</div>
4

1 回答 1

0

除了组件中的导航方法外，您的代码中的一切似乎都是正确的

方法一：

<a [routerLink]="[{outlets: {'viewOutlet': ['view']}}]" >Load View</a> | <a [routerLink]="[{outlets: {'editOutlet': ['edit']}}]">Load Edit</a>

删除（点击）事件。这会将您导航到相应的网点。

方法 2： 在导航方法中像这样使用

this.router.navigate([{ outlets: {'viewOutlet': ['view']}}],{relativeTo:this.route});
于 2019-07-30T13:14:14.987 回答