Question

我遵循了此页面（https://yakovfain.com/2015/11/11/angular-2-passing-data-to-routes/）的指示，在模块之间传递ID，以将其用作搜索过滤器，但是我遇到了无法匹配任何路线的错误，并且因为我被卡住了一段时间角的新功能，所以我真的不知道我可能做错了什么。

错误日志

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'municipality/%5B'./municipalityListDep',department.code%5D'
Error: Cannot match any routes. URL Segment: 'municipality/%5B'./municipalityListDep',department.code%5D'
    at ApplyRedirects.noMatchError (router.js:4295)
    at CatchSubscriber.selector (router.js:4259)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at TapSubscriber._error (tap.js:56)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

municipality-listdep.component.ts

import { Component, OnInit }    from '@angular/core';
import {ActivatedRoute}         from '@angular/router';
import { Observable }           from 'rxjs';

import { MunicipalityService }  from '../municipality/municipality.service';
import { Municipality }         from '../municipality/municipality';
import { DepIsNumericalDirective } from '../directives/depisnumerical.directive';

@Component
({
    selector:       'municipality-listdep',
    templateUrl:    './municipality-listdep.component.html',
    styleUrls:      ['./municipality-listdep.component.css']
})

export class MunicipalityListDepComponent implements OnInit
{
    municipalities: Observable<Municipality[]>;
    code;
    sub;

    constructor(private municipalityService: MunicipalityService, private route: ActivatedRoute)
    {   }

    ngOnInit()
    {
        this.sub = this.route.paramMap.subscribe(params =>
        {
            this.code = params.get('dep');
            let municipalities = this.municipalityService.getMunicipalitiesByDept(this.code);
        });
    }

    reloadData()
    {   this.municipalities = this.municipalityService.getMunicipalitiesByDept(this.code);  }

}

municipality.component.html

<h1>Municipios</h1>
<br />
<br />
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="flex-start">
    <div fxFlex="0 1 calc(33.3% - 10px)"><municipality-add></municipality-add></div>
    <div fxFlex="0 1 calc(33.3% - 10px)"><router-outlet></router-outlet></div>
    <div fxFlex="0 1 calc(33.3% - 10px)">
        <nav fxLayout="column" fxLayoutGap="10px">
            <a routerLink="municipalityList" class="button" role="button" routerLinkActive="active">Lista De Municipios</a>
            <a routerLink="['/municipalityListDep',department.code]" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>
            <div fxLayout="row">
            <img id="arrow" src="assets/LArrow.png" style="width:5%;height:3%;">
            <select class="button" type="text" id="srdep" required [(ngModel)]="depcode" name="srdep">
                <option *ngFor="let department of departments | async" [value]="department.code">{{department.name}}</option>
            </select>
            </div>
        </nav>
    </div>
</div>

municipality.component.ts

import { Component, OnInit }    from '@angular/core';
import { Observable }           from 'rxjs';

import { Department }           from '../department/department';
import { DepartmentService }    from '../department/department.service';

@Component
({
    selector:       'municipality',
    templateUrl:    './municipality.component.html',
    styleUrls:      ['./municipality.component.css']
})

export class MunicipalityComponent implements OnInit
{
    departments: Observable<Department[]>;
    depc: string;

    constructor(private departmentService: DepartmentService)
    {   }

    ngOnInit()
    {   
        this.departments = this.departmentService.getDepartmentsList();
    }
}

municipality-routing.module.ts

import { NgModule }                         from '@angular/core';
import { RouterModule, Routes }             from '@angular/router';

import { MunicipalityComponent }            from './municipality.component';
import { MunicipalityListComponent }        from './municipality-list.component';
import { MunicipalityListDepComponent }     from './municipality-listdep.component';

const routes: Routes =
[
    {
        path: 'municipality',
        component: MunicipalityComponent,
        children:
        [
            {
                path:'',
                redirectTo:'municipalityList',
                pathMatch: 'full'
            },
            { 
                path: 'municipalityList', 
                component: MunicipalityListComponent 
            },
            {
                path: 'municipalityListDep/:dep',
                component: MunicipalityListDepComponent
    }   ]   }
];

@NgModule
({
    imports:
    [
        RouterModule.forChild(routes)
    ],
    exports:
    [
        RouterModule
    ]
})

export class MunicipalityRoutingModule
{   }

Answer 1

我在stackblitz中看到代码后更新了答案。

问题之一在这里：

municipality.component.html

<a routerLink="['/municipalityListDep',department.code]" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>

此刻，您单击<a routerLink="['/municipality/municipalityListDep',department.code]">尝试导航到localhost:4200/municipalityListDep/:dep

与其像在 municipality-routing.module.ts

中配置的那样导航到localhost:4200/municipality/municipalityListDep/:dep

您必须相对于URL路径进行导航： /municipality/municipalityListDep

最后，首先要进行更改：

municipality.component.html

<a routerLink="['../municipalityListDep',department.code]" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>

然后，第二个问题是您在routerLink中使用的“ department.code”（我将其标记为（'HERE->''<-HERE'）：

<div fxFlex="0 1 calc(33.3% - 10px)">
    <nav fxLayout="column" fxLayoutGap="10px">
        <a routerLink="municipalityList" class="button" role="button" routerLinkActive="active">Lista De Municipios</a>
        <a routerLink="['../municipalityListDep','HERE->'department.code'<-HERE']" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>
        <div fxLayout="row">
        <img id="arrow" src="assets/LArrow.png" style="width:5%;height:3%;">
        <select class="button" type="text" id="srdep" required [(ngModel)]="depcode" name="srdep">
            <option *ngFor="let department of departments | async" [value]="department.code">{{department.name}}</option>
        </select>
        </div>
    </nav>
</div>

我在Municipality.component.ts中没有看到任何变量或属性，因此我假设您正在使用* ngFor的“部门”和“部门。代码”。在这种情况下，部门不在<a>的范围内，因为它的级别比<a>低。如果要在*ngFor中使用<a>的department.code，建议您将*ngFor移到其他包含<select>和{{1 }}还是孩子。

另一方面，如果您想在<a>中使用选定的值（如您所做的正确），则可以将值保存在属性（邮政编码）中，并在{{1 }}：

<select>

这能解决您的问题吗？

将数据传递到路线-错误：无法匹配任何路线

1 个答案: