Angular命名路由器输出的投掷错误

Question

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

要简化，让我们考虑一下：

1. 两个路由器链接 - 'view'和'edit'
2. 两个组件-ViewComponent和EditComponent
3. 两个路由器插座-viewOutlet和editOutlet，在页面上显示。

单击"视图"链接时，必须在ViewOutlet中加载链接查看程序，并且单击"编辑"链接链接编辑Component时，必须加载EditOutlet中的" EditComponent"。在这里可以接受的是，当显示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>

Answer 1

除了组件中的导航方法

中的导航方法外，每个图似乎都正确

方法1：

<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});