RouteParam не передается из RouterLink * Обновлено *

Question

У меня есть простое приложение с двумя компонентами и сервисом. Я опишу поток приложения, когда я публикую каждую часть приложения.

api.service - этот сервис содержит два вызова API и содержит одну переменную (id), которую я разделяю между моими компонентами и будет оценен из ссылки меню.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  url = 'api address';

  id;  //variable being shared

  constructor(private http: HttpClient) { }
  getMenus(){
    return this.http.get(this.url);
  }
  getContent(){
    return this.http.get(this.url);
}
}

nav.component.ts - этот компонент содержит навигацию по сайту, представляющую собой список повторяющихся элементов одного из вызовов API:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

menus; //holder for iterable
id; // shared variable

  constructor(private api: ApiService) { }
  ngOnInit() {
    this.api.getMenus().subscribe(res => {this.menus = res});
  }
  set_id(id){
    this.api.id = this.id
 }
}

}

представление для nav.component - каждое меню связано с маршрутом содержимого, и я передаю индекс каждого элемента ссылке в качестве идентификатора, который также является общей переменной.

<div *ngFor="let menu of menus; index as id">
    <ul>
        <li><a routerLink ="content/{{id}}" (click)="set_id(id)">{{menu['course-lesson-name']}}</a></li>
    </ul>
</div>

content.component.ts - этот компонент содержит содержимое из второго вызова API и использует переменную общего идентификатора для выбора содержимого из вызова.

import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { ApiService } from '../api.service';
import { switchMap, map } from 'rxjs/operators';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
content; //holder for iterable
id; //from api.service
  constructor(private api: ApiService) { }

  ngOnInit(){
    this.api.getContent().subscribe((res : any[]) => {
    this.content = res[this.api.id]}) //this is supposed to be the shared variable being valued from nav.component
  }
  }

просмотр для content.component

<p *ngIf="content">{{content['course-lesson-name']}}</p>

вот мой маршрутизатор:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent } from './content/content.component';

const routes: Routes = [
  {path: 'content/:id', component: ContentComponent},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Пользователи должны иметь возможность щелкнуть пункт меню и получить Индекс этого элемента передается в общую переменную (id), которая передается в маршрутизатор и в контент из параметра маршрута. Ссылки формируются правильно, но при нажатии на любую из ссылок контент не отображается.

Answer 1

Возможно, вы захотите посмотреть, как получить параметры маршрута в Angular документах .

Короче говоря, ваш контроллер должен будет загрузить ActivatedRoute сервис и подписаться на его params можно наблюдать, чтобы получить параметры маршрута:

(...)
    constructor(private api: ApiService, route: ActivatedRoute) { }
(...)

    ngOnInit(){
      this.route.params.subscribe(params => { this.id = params.id })
(...)