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-адресом в браузере для каждой ссылки, содержимое загружается по мере необходимости, поэтому я предполагаю, что со ссылками что-то не так. Кстати, идентификатор устанавливается в соответствии с требованиями и регистрируется на консоли, но не перезагружает содержимое по мере необходимости на основании его значения.

Вот маршрутизатор, если необходимо:

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

Идентификатор должен быть сохранен и передан в 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. Есть некоторые довольно длинные (и горячие) проблемы GitHub по этому поводу на angular GitHub. По сути, вам нужно сделать следующее:

1. Внедрить ActivatedRoute в свой компонент (this._route ниже)
2. Подписаться на queryParams и делать то, что вам нужно

Пример:

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

• Angular 2 маршрут перезагрузки при изменении параметра
• https://medium.com/@mvivek3112 / перезагрузка -компоненты при изменении параметров маршрута- angular -deed6107c6bb
• https://github.com/angular/angular/issues/15677
• https://github.com/angular/angular/issues/10207

Типичный шаблон, который я придерживаюсь для этого типа вещей, заключается в том, чтобы инкапсулировать все логи c, которые вам нужно запустить, когда параметр изменяется в функцию. Затем запустите эту функцию в своем ngOnInit, а затем прямо под ним, подпишитесь на queryParams, чтобы вы могли реагировать на любые обновления (таким образом вызывая ту же функцию, которая их обрабатывала).

Answer 2

Вы не говорите маршрутизатору делать что-либо после выбора идентификатора ... Для события click в nav.component.ts вы должны перейти к выбранному маршруту идентификатора.

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