Question

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

为简单起见，让我们考虑一下：

两个路由器链接-“视图”和“编辑”
两个组成部分-ViewComponent和EditComponent
两个路由器插座-viewOutlet和editOutlet在页面上相邻显示。

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

我还在这里创建了一个堆叠闪电战-

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

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

我已经按照文档进行了所有代码更改。但是我收到Cannot match any routes. URL Segment: 'view'

的错误消息

您可能会问为什么我要使用路由器插座来显示简单的组件。这样做的原因是，这只是我的实际应用程序中最简单的副本。我的应用程序中的组件具有表格。当表单脏了并且用户尝试离开它时，我将显示确认“您是否要放弃更改”。据我所知，如果不涉及路线，就无法实现。

代码如下：

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

角命名路由器出口抛出错误

1 个答案: