Question

我是Angular的新手（使用AngularJs花了两年多时间）。我一直在观看有关复数视频的视频，并设法建立这样的路线：

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

import { ResultsComponent } from './results.component';
import { ResultsSaveComponent } from './results-save.component';

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: 'results', component: ResultsComponent }
    ])
  ],
  declarations: []
})
export class ResultsRoutingModule { }

工作正常。我有一些代码导航到这个组件，如下所示：

this._router.navigateByUrl('/results/' + result.id);

没有问题。为了完整起见，这是组件：

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

import { ResultsService } from '../shared/results.service';
import { IResult } from '../shared/models/result.model';
import { IGroup } from '../shared/models/group.model';

@Component({
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.scss']
})
export class ResultsComponent implements OnInit {
  id: number;
  result: IResult;
  groups: IGroup[];
  private sub: any;

  constructor(
    private _resultsService: ResultsService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
    this._resultsService.get(this.id).subscribe(result => {
      this.result = result
      this.groups = JSON.parse(result.data);
    });
  }
}

现在，我已经建立了另一条路线。它几乎完全一样：

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

import { ResultsComponent } from './results.component';
import { ResultsSaveComponent } from './results-save.component';

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: 'update-result', component: ResultsSaveComponent },
      { path: 'results', component: ResultsComponent }
    ])
  ],
  declarations: []
})
export class ResultsRoutingModule { }

同样，我有一些应该重定向到它的代码：

this._router.navigateByUrl('/update-result/' + result.id);

但是这个失败了。它声明：

错误：无法匹配任何路线。网址细分：＆＃39;更新结果/ 1＆＃39;

该组件如下所示：

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';

import { ResultsService } from '../shared/results.service';
import { IResult } from '../shared/models/result.model';

@Component({
  templateUrl: './results-save.component.html',
  styleUrls: ['./results-save.component.scss']
})
export class ResultsSaveComponent implements OnInit {
  id: number;
  result: IResult;

  constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router, 
    private _resultsService: ResultsService
  ) { }

  ngOnInit() {
    this._activatedRoute.queryParams.subscribe((params: Params) => this._resultsService.elq = params['elq']);

    this._activatedRoute.params.subscribe(params => {
      this.id = +params['id'];
    });

    this._resultsService.get(this.id).subscribe(result => {
      this.result = result
    });
  }

  getResults() {
    this._resultsService.update(this.result).subscribe(result => {
      this._router.navigateByUrl('/results/' + result.id);
    });
  }

}

我无法理解为什么第二条路线不会起作用。正如我所说，它几乎与前一条路线完全相同。我认为我做的事情很傻，但我不知道在哪里看。有人可以帮助我吗？

Answer 1

您的{ path: 'update-result', component: ResultsSaveComponent }路线只会考虑路径/update-result/，而不是您导航到的路径。

请注意，/update-result/和/update-result/1不是相同的路线。你应该做的是使用路线参数，如下所示：

{ path: 'update-result/:id', component: ResultsSaveComponent }

这将匹配您导航到的网址。更多信息：https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

Answer 2

关注@ Haitam的帖子，你做导航的方式并不完全遵循惯例或方法。

 RouterModule.forChild([
  { path: 'update-result', component: ResultsSaveComponent },
  { path: 'results', component: ResultsComponent }
 ]);

此路由定义的含义是只有两个路由可用，/ results和/ update-result。

如果您想将ID作为网址的一部分传递，则需要将路由更新为

 RouterModule.forChild([
  { path: 'update-result/:id', component: ResultsSaveComponent },
  { path: 'results/:id', component: ResultsComponent }
 ]).

或者，如果您确实希望保留原始路线，可以使用矩阵表示法导航到您的网址以传递可选参数

this._router.navigateByUrl('/update-result;id=' + result.id);

或

this._router.navigate(['/update-result', {id: result.id}]);

请注意，/已替换为;。通过矩阵表示法定义的参数可以通过route.paramMap可观察序列访问。您可以在此处阅读有关可选参数的更多信息https://angular.io/guide/router#optional-route-parameters

此外，我强烈建议您浏览角度网站https://angular.io/docs的文档页面。它具有非常丰富的内容，可以为您提供非常坚实的基础。

Angular4路由问题

2 个答案: