角度2(稳定)，带出口的路线和路径=非空，不工作.

路由器路径如下的路由，

{ path: 'lefttoggle', redirectTo: 'lefttoggle', pathMatch: 'full', outlet: 'lefttoggle_name'},

Angular2正在抛出异常：

编辑：
MainCompnent.template.html

<div><a href="/lefttoggle">click to show left</a></div>
<div class="col-md-10" style="top:70;left:-1%;position:relative;">
            <router-outlet name="righttoggle_name"></router-outlet>
              <router-outlet name="lefttoggle_name"></router-outlet>
</div>

AppRoutes.ts

    { path: '', component: AppComponent },
    { path: 'lefttoggle', outlet: 'lefttoggle_name', component: LeftToggleComponent},
    { path: 'righttoggle', outlet: 'righttoggle_name', component: RightToggleComponent}

点击时产生错误：

core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'lefttoggle'

您已经定义了重定向，但还没有定义任何带有实际组件的路由。

试试这个：

{ path: '', redirectTo: 'lefttoggle', pathMatch: 'full' }, { path: 'lefttoggle' , component: LeftToggleComponent},

当您打开应用程序时，您将从''重定向到'lefttoggle'，然后在那里加载实际组件。如果您不想从''重定向，只需删除该行即可。

这里的重要因素是定义要显示的component。

编辑：

我看到你添加了更多的代码。您仍然使用path: 'lefttoggle'定义了两条路线。

您希望路由器如何从lefttoggle重定向到lefttoggle？你必须定义不同的路径。

{ path: '', component: AppComponent },
{ path: 'lefttoggle', outlet: 'lefttoggle_name', component: LeftToggleComponent},
{ path: 'righttoggle', outlet: 'righttoggle_name', component: RightToggleComponent}

更改为，

{ path: '', component: AppComponent },
{ path: '', outlet: 'lefttoggle_name', component: LeftToggleComponent},
{ path: '', outlet: 'righttoggle_name', component: RightToggleComponent}

我还假设MainComponent.html是AppComponent的html。

工作演示；https://plnkr.co/edit/inHDLkO8qbteUORfjUQl?p=preview

相关内容

最新更新

热门标签：