错误:无法匹配任何路由.URL 段: - Angular 2 [英] Error: Cannot match any routes. URL Segment: - Angular 2

问题描述

我是 angular2 的新手.我试图了解如何在特定模板中使用多个 .我在这里进行了许多质量检查，但无法解决我的错误.

I am new to angular2. I am trying to understand how to use multiple <router-outlets> in a particular template. I have gone though many QA here but couldn't resolve my error.

router.module.ts

const routes: Routes = [
{
    path: '',
    redirectTo: 'one',
    pathMatch: 'full'
},
{
    path: 'two',
    component: ClassTwo, children: [
        {
            path: 'three',
            component: ClassThree,
            outlet: 'nameThree',
        },
        {
            path: 'four',
            component: ClassFour,
            outlet: 'nameFour'
        }
    ]
},];

component1.html

<h3>In One</h3>

<nav>
    <a routerLink="/two" class="dash-item">...Go to Two...</a>
    <a routerLink="/three" class="dash-item">... Go to THREE...</a>
    <a routerLink="/four" class="dash-item">...Go to FOUR...</a>
</nav>

<router-outlet></router-outlet>                   // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
<router-outlet name="nameFour" ></router-outlet>  // Error: Cannot match any routes. URL Segment: 'three'

component2.html

<h3>In two</h3>

component3.html

<h3>In three</h3>

component4.html

<h3>In four</h3>

下面的截图是我当前的输出:

The below screenshot is my current output:

当我点击...转到两个... 两个被打印出来.但是点击其他两个链接会给我错误无法匹配任何路线

When I click ...Go to Two... In two is printed. But clicking on other two links gives me the error Cannot match any routes

推荐答案

自己解决了.还做了一些小的结构变化.从 Component1 到 Component2 的路由由单个 完成.Component2 到 Comonent3 和 Component4 由多个 完成结果内容是:

Solved myself. Done some small structural changes also. Route from Component1 to Component2 is done by a single <router-outlet>. Component2 to Comonent3 and Component4 is done by multiple <router-outlet name= "xxxxx"> The resulting contents are :

Component1.html

<nav>
    <a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
    <router-outlet></router-outlet>

Component2.html

 <a [routerLink]="['/two', {outlets: {'nameThree': ['three']}}]">In Two...Go to 3 ...       </a>
 <a [routerLink]="['/two', {outlets: {'nameFour': ['four']}}]">   In Two...Go to 4 ...</a>

 <router-outlet name="nameThree"></router-outlet>
 <router-outlet name="nameFour"></router-outlet>

'/two' 代表父组件，['three']和 ['four'] 代表链接component2 各自的孩子.Component3.html 和 Component4.html 与问题中的相同.

The '/two' represents the parent component and ['three']and ['four'] represents the link to the respective children of component2 . Component3.html and Component4.html are the same as in the question.

router.module.ts

const routes: Routes = [
{
    path: '',
    redirectTo: 'one',
    pathMatch: 'full'
},
{
    path: 'two',
    component: ClassTwo,
    children: [
        {
            path: 'three',
            component: ClassThree,
            outlet: 'nameThree'
        },
        {
            path: 'four',
            component: ClassFour,
            outlet: 'nameFour'
        }
    ]
}];

这篇关于错误:无法匹配任何路由.URL 段: - Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！