Как передать параметры на маршрут в Angular

Question

Я исследую Angular. Я пробую некоторые базовые c концепции, такие как маршрутизация, Observables (и подписка на них), создание HTTP-запросов и параметров маршрутизации. Я создал очень простой сценарий c, в котором я делаю HTTP-запрос GET к JSONPlaceholder для получения всех альбомов. Я создал сервис для этого. Я добавил:

<a [routerLink]="['albums', album.id]">{{album.title}}</a>

к названию альбома, когда я нажимаю на заголовок, я должен быть перенаправлен в детальный вид этого конкретного альбома. Я также покажу вам свой код, но я думаю, что stackblitz будет более значимым. Вот код:

album-detail.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AlbumService } from './albums.service';
import { IAlbum } from './album';

@Component({
  template: './album-detail.component.html'
})
export class AlbumDetailComponent {

  album: IAlbum;

  constructor(private _route: ActivatedRoute, private _albumService: AlbumService) {}

  ngOnInit(): void {
    const id=+this._route.snapshot.paramMap.get('id');
    console.log("called for: "+id);
    this.getAlbumById(id);
  }

  getAlbumById(id: number) {
    this._albumService.getAlbumById(id).subscribe({
      next: album => this.onAlbumRetrieved(album)
    })
  }

  onAlbumRetrieved(album: IAlbum): void {
    this.album = album;
  }
}

album.module.ts

import { NgModule } from '@angular/core';
import { AlbumListComponent } from './albums-list.component';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AlbumDetailComponent } from './album-detail.component';


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forChild([
      {path: 'albums', component: AlbumListComponent},
      {path: 'albums/:id', component: AlbumDetailComponent},
    ])
  ],
  declarations: [ 
    AlbumListComponent,
    AlbumDetailComponent
  ]
})
export class AlbumModule { }

Мой запрос на получение также успешен, но что-то не так с моей маршрутизацией:

Answer 1

Вы должны сделать только эти изменения.

в album.module.ts

 RouterModule.forChild([
    {path: 'albums', component: AlbumListComponent},
    {path: 'albums/album/:id', component: AlbumDetailComponent},
 ])

в album-detail.component.ts

@Component({
  templateUrl: './album-detail.component.html'
})

check обновленный код этих двух файлов.

album.module.ts

import { NgModule } from '@angular/core';
import { AlbumListComponent } from './albums-list.component';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AlbumDetailComponent } from './album-detail.component';


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forChild([
      {path: 'albums', component: AlbumListComponent},
      {path: 'albums/album/:id', component: AlbumDetailComponent},
    ])
  ],
  declarations: [ 
    AlbumListComponent,
    AlbumDetailComponent
  ]
})
export class AlbumModule { }

album-detail.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AlbumService } from './albums.service';
import { IAlbum } from './album';

@Component({
  templateUrl: './album-detail.component.html'
})
export class AlbumDetailComponent {

  album: IAlbum;

  constructor(private _route: ActivatedRoute, private _albumService: AlbumService) {}

  ngOnInit(): void {
    const id=+this._route.snapshot.paramMap.get('id');
    console.log("called for: "+id);
    this.getAlbumById(id);
  }

  getAlbumById(id: number) {
    this._albumService.getAlbumById(id).subscribe({
      next: album => this.onAlbumRetrieved(album)
    })
  }

  onAlbumRetrieved(album: IAlbum): void {
    this.album = album;
  }
}

дайте мне знать, если у вас есть какие-либо сомнения.

Answer 2

Ваш AppModule не имеет зарегистрированных маршрутов альбома. При импорте AlbumModule не регистрируются маршруты, в которых вы пытались зарегистрироваться.

Вы можете обрабатывать маршруты альбомов следующим образом:

1. Делегировать ответственность за маршрутизацию альбома отложенная загрузка модуля.
2. Регистрация маршрутизации альбома в модуле приложения

Ленивая загрузка для целей этого ответа излишня, и вы можете прочитать об этом отдельно.

Простое решение здесь состоит в том, чтобы переместить маршруты из AlbumModule в AppModule:

RouterModule.forRoot([
  {path: 'home', component: HomeComponent},
  {path: 'albums', component: AlbumListComponent},
  {path: 'albums/:id', component: AlbumDetailComponent},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
])

Вы должны сделать ссылку на маршрутизатор абсолютной (а не относительно текущего маршрута), поставив перед ней префикс a sla sh:

<a [routerLink]="['/albums', album.id]">{{album.title}}</a>

DEMO: https://stackblitz.com/edit/angular-dyq5wb

Обратите внимание, что я также обновил AlbumDetailComponent:

templateUrl: './album-detail.component.html'.

Answer 3

Вам необходимо внести 2 изменения:

В album-detail.component.ts :

templateUrl: './album-detail.component.html'

В album-list.component. html:

<a [routerLink]="[album.id]">{{album.title}}</a>