Question

路由器路径如下的路由

{ 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}

onClick产生错误：

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

Answer 1

您已定义了重定向，但尚未定义任何具有实际组件的路由。

试试这个：

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

当您打开应用时，系统会将您从''重定向到'lefttoggle'，然后会加载实际组件。如果您不想从''重定向，只需删除该行。

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

编辑：

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

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

Answer 2

{ 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://regex101.com

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

2 个答案: