Angular 未从RouterLink传递RouteParam*已更新*

我有一个包含两个组件和一个服务的简单应用程序。我将在发布应用程序的每个部分时概述应用程序流程

api.service-此服务包含两个api调用，并在我的组件之间共享一个变量id Im，并将从菜单链接中进行赋值

nav.component.ts-此组件保存站点的导航，它是一个API调用中迭代项的列表：

}

查看nav.component-每个菜单都链接到内容路由，Im将每个项目的索引作为id传递给链接，id也是共享变量

查看content.component

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

---

用户应该能够单击菜单项，并将该项的索引传递给共享变量id，该变量id传递给路由器，并从route param传递到内容中。链接的格式正确，但单击任何链接时都不会显示任何内容

您可能希望了解如何在中检索管线参数

简而言之，您的控制器需要加载服务并订阅其可观察的参数，以获取路由参数：

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

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

---

存储单击项id的逻辑在哪里？您的内容由ngIf指令保护。如果你在里面放一个hello world h1会怎么样？还是空的？而且@Aravind有一个优点。您使用迭代器生成标识符，但从不将这些值存储在任何位置。ApiService从未分配其id变量。代码已使用分配值的函数更新-仍然没有内容工作这也需要在服务中吗？我一直在寻找类似的东西，因为我已经在AngularJS中构建了相同的应用程序，并使用$routeParams来处理这个问题。感谢好消息-它的工作，但只有一个单一的链接；第一个。之后，当单击其他链接时，内容不会根据需要更改。

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

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
  }
  }

<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 { }

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

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