Вызывающее поведение конструктора смутило меня

Question

Я изучаю параметризованную маршрутизацию в Angular, в которой я застрял в поведении метода конструктора.

У меня есть такой компонент сведений о сотруднике

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-employeedetail',
  templateUrl: './employeedetail.component.html',
  styleUrls: ['./employeedetail.component.css']
})
export class EmployeedetailComponent implements OnInit {
    eid : number;
    name : string;
    constructor(private rt : ActivatedRoute) {
      this.rt.params.subscribe(e=>{
        this.eid = e["id"];
        this.name = e["name"];
      })
      console.log("called detail constructor"+this.eid);
    }
      ngOnInit(){

      } 

}

employeedetail.component.html похож наниже

<p>employeedetail works!</p>
<span>ID of Employee is {{eid}} and name is {{name}}</span>

<a class="btn btn-primary pull-right" [routerLink]="['/employeedetail',102,'user2']">Next</a>

Шаг 1:

У меня есть окно списка сотрудников, где у меня есть список сотрудников, как показано ниже.

<p>list-employee!</p>
<table>
    <tr>
            <th>Name</th>
            <th>Mobile</th>
            <th>Location</th>
            <th>View</th>
    </tr>
    <tr>
        <td>User1</td>
        <td>9696969696</td>
        <td>Pune</td>
        <td><a [routerLink]="['/employeedetail',101,'User1']">View</a></td>
    </tr>
    <tr>
        <td>User2</td>
        <td>8686868686</td>
        <td>Pune</td>
        <td><a [routerLink]="['/employeedetail',102,'User2']">View</a></td>
    </tr>

</table>

Когда я нажимаю на пользователя 1вызывается компонент детализации ссылки, поэтому также вызывается метод конструктора, и мой eid и имя устанавливаются пользователем 1 детали

Шаг 2

Я добавил следующую ссылку кнопки на странице подробностей, чтобы проверитьповедение конструктора при нажатии на следующую ссылку. Моя переменная eid и name изменяется с подробностями пользователя 2, но это не должно происходить, поскольку конструктор не вызывается на этот раз, но все еще изменяются переменные (console.log("called detail constructor"+this.eid); Я добавил это, чтобы проверить, вызывается ли он или нет)

Answer 1

Такое поведение ожидается, когда вы получаете значения для переменных eid и name через подписчика, которого вы добавили к наблюдаемому атрибуту params ActivatedRoute сервис, который вы ввели.

При первом запросе первого сотрудника angular создает компонент и вызывает его конструктор. После этого при нажатии кнопки Далее angular будет повторно использовать тот же экземпляр компонента, но атрибут params службы ActivatedRoute отправит новое событие с новыми значениями для нового маршрута

Answer 2

Это происходит из-за изменений в параметре маршрута, не восстанавливающих Компонент (т.е. EmployeedetailComponent). Волшебство действительно происходит, потому что вы подписались на Observable, когда в первый раз попали на эту страницу [т.е. компонент] -

this.rt.params.subscribe(e=>{
        this.eid = e["id"];
        this.name = e["name"];
      })

Если при маршрутизации изменяются только параметры маршрута, angular не восстанавливает компонент, а использует тот же экземпляр компонента, который был создан при переходе приложения к запрошенному маршруту. Поскольку вы подписались на наблюдаемую params, вы видите, что eid и name изменены.

На том же маршруте, если параметры маршрута изменяются, то угловой маршрутизатор выдает новое значение параметров в params наблюдаемом, которое будет переоценивать код на params подписке [т.е. В вашем коде eid и name будет иметь новое значение].

Надеюсь, он ответил на ваш вопрос и избавит вас от путаницы.