RouterLink 不更新内容

Question

我有以下组件：

nav.component.ts

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

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css'],
  providers: [ApiService]
})
export class NavComponent implements OnInit {
menus;
id;
    constructor(private api: ApiService, private route: ActivatedRoute) { }

    ngOnInit() {
    this.route.queryParams.subscribe(queryParams => { this.id = queryParams.id });
    this.api.getMenus().subscribe(res => {this.menus = res});

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

  set_id(id){
    this.id = id
    console.log(this.id)
  }
}

在这个组件中，正在加载一个菜单，并从来自以下链接的 route.param 设置一个变量：

nav.component.html

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

应用加载正常，但内容仅更新一次。单击任何单个菜单项后，将显示内容，但随后我失去了功能，因为任何后续单击都不会加载任何内容。如果我在浏览器中为每个链接手动操作 url，内容会根据需要加载，所以我假设链接有问题。顺便说一句，正在根据需要设置 id 并登录到控制台，但不会根据其值根据需要重新加载内容。

如果需要，这里是路由器：

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

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

应该存储 id 并将其传递给 content.component.ts，以便 getContent() 可以使用它从响应中解析正确的内容元素：

content.component.ts

import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { ApiService } from '../api.service';
import { RouterLink, ActivatedRoute } from '@angular/router';

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

  ngOnInit(){
    this.route.queryParams.subscribe(queryParams => { this.id = queryParams.id });
    this.api.getContent().subscribe((res : any[]) => {this.content = res[this.id]})
    this.api.getContent().subscribe((res) => {this.content = res[this.id]})
  }

}

Answer 1

是的，这是因为当 URL 中的参数更改时，您的组件不会重新加载。在 Angular GitHub 上有一些相当冗长（而且很激烈）的 GitHub 问题。本质上，您需要这样做：

1. 在你的组件中注入ActivatedRoute（下面是this._route）
2. 订阅queryParams，做你想做的事

例子：

this._route.queryParams.subscribe( q => {
    // Do something...
} );

• Angular 2 reload route on param change
• https://medium.com/@mvivek3112/reloading-components-when-change-in-route-params-angular-deed6107c6bb
• https://github.com/angular/angular/issues/15677
• https://github.com/angular/angular/issues/10207

我对这类事情遵循的典型模式是封装当参数变为函数时需要运行的任何逻辑。然后，在您的 ngOnInit 中运行该函数，然后在其正下方订阅 queryParams，以便您可以对任何更新做出反应（从而调用处理该更新的同一函数）。

Answer 2

在选择 id 后，您并没有告诉路由器做任何事情...... 对于 nav.component.ts 中的点击事件，您应该导航到选定的 id 路由。

set_id(id){
    this.router.navigate(['content/' + id ]);
}