Angular 2. Помогите, ошибка (Routing)

[AndreyAndreyKiev]

Ребята, доброго времени суток, помогите решить ошибку в тестовом задании

Ошибка - При активации функции selectEdit(i) в компоненте навигации, в <router-outlet /> открывается компонент с информацией, срабатывает ngOnInit, всё супер. Но при повторном активации этой функции путь меняется (например с /edit-book/1 на /edit-book/2) и ngOnInit не срабатывает.
НужноНужно сделать чтобы при каждом срабатывании функции selectEdit переменная form_name в компоненте с информацией была равна значению edit_id в сервисе.


Код сервиса

import { Book } from "../model/book";

export class BookService {

    private data: Book[] = [
        {name:"BookTest", page:316, genre:"Fantastic"},
        {name:"BookFirst", page:190, genre:"Triller"}
    ];

    getData(): Book[] {
        return this.data;
    }
    addData(name:string, page:number, genre:string){
        this.data.push(new Book(name, page, genre));
    }
    editData(name:string, page:number, genre:string){
        this.data[this.edit_id].name = name;
        this.data[this.edit_id].page = page;
        this.data[this.edit_id].genre = genre;
    }

    public edit_id:number;

}

Тип данных

export class Book {
     
    constructor(public name: string, public page: number, public genre: string) { }

}

Код компонента с навигацией

import { Component, OnInit } from "@angular/core";
import { Book } from "../model/book";
import { BookService } from "../BookService/BookService.service";
import { Router } from "@angular/router";

@Component({
    selector:"comp-main",
    templateUrl:"app/Component/app.component.html"
})
export class AppComponent implements OnInit{
    
      items: Book[] = [];

      constructor(private dataService: BookService, private router: Router){ }
      
      addItem(name:string, page:number, genre:string){
          this.dataService.addData(name, page, genre);
      }

      ngOnInit(){
          this.items = this.dataService.getData();
      }

      delete(i:number){
          this.items.splice(i,1);
      }

      selectEdit(i:number){
          this.router.navigate(["edit-book",i+1]);
          this.dataService.edit_id = i;
      }

}

Код компонента с информацией

import { Component, OnInit } from "@angular/core";
import { Book } from "../model/book";
import { BookService } from "../BookService/BookService.service";
import { Router } from "@angular/router";

@Component({
     selector:"comp-edit",
     templateUrl:"app/edit-book/app.component.edit-book.html"
})
export class AppComponentEdit implements OnInit{

    items: Book[] = [];

    constructor(private dataService: BookService, private router: Router){ }
    
    addItem(name:string, page:number, genre:string){
        this.dataService.addData(name, page, genre);
    }

    ngOnInit(){
        this.items = this.dataService.getData();
        console.log(this.dataService.edit_id);
        this.form_name = this.items[this.dataService.edit_id].name;
    }
    
    form_name:string;

}

[destus]

AndreyAndreyKiev,
В коде нет ошибки. Это стандартное поведение работы Ангуляра, о чем в принципе в документации написано. То есть если у вас активен какой-то роутовский компонент и вы переходите на точно такой же урл этого компонента, меняя только параметры, то компонент удаляться из DOM и заново отрисовываться не будет. Поэтому ngOnInit и не срабатывает второй раз.
А решение этой проблемы очень простое. Необходимо сделать inject сервиса ActivatedRoute в "Код компонента с информацией" и подписываться на params https://angular.io/api/router/ActivatedRoute

[AndreyAndreyKiev]

А можете подробнее описать как это сделать?

[destus]

AndreyAndreyKiev,
В сервисе edit_id совсем необязателен, потому что этот параметр можно получить из url. Но раз так сделано...

import { ActivatedRoute, Params } from '@angular/router';

constructor(private dataService: BookService, private router: Router, private route: ActivatedRoute ){ }

ngOnInit(){
        this.items = this.dataService.getData();
        this.route.params.subscribe((params: Params) => {
            console.log(this.dataService.edit_id);
            this.form_name = this.items[this.dataService.edit_id].name;
        })
    }

[AndreyAndreyKiev]

Спасибо большое