Angular4 路由问题

Question

我真的是 Angular 的新手（使用 AngularJs 超过 2 年）。我一直在 pluralsight 上观看视频，并设法设置了这样的路线：

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);

但是这个失败了。它指出：

Error: Cannot match any routes. URL Segment: 'update-result/1'

组件如下所示：

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 }

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

Answer 2

按照@Haitam 的post，您进行导航的方式并不完全遵循惯例或方法。

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

这个路由定义的意思是只有两条路由可用，/results 和 /update-result。

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

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

或者，如果您确实希望保留原始路线，您可以使用矩阵符号导航到您的 url 以传递可选参数，例如

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

此外，我强烈建议您浏览 angular 站点 https://angular.io/docs 的文档页面。内容非常丰富，可以给你打下非常扎实的基础。

Angular4 路由问题

Angular4 routing issue

angular-routing

angular