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中单击时，将调用链接详细信息组件，因此也将调用构造函数方法，并使用用户1的详细信息设置我的eid和名称

第2步

我已在详细信息页面中添加了下一个按钮链接，以检查单击下一个链接时的构造函数行为，并使用用户2的详细信息更改我的eid和名称变量，但这不会发生，因为这次不调用构造函数，但变量仍会更改（ {1}}我已经添加了它以检查它是否被调用

Answer 1

之所以会发生这种情况，是因为route参数的更改并未重构Component（即EmployeedetailComponent）。魔术的确在发生，因为您是第一次登录此页面时就订阅了一个Observable [组件]-

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

如果仅在路由中更改了路由参数，则angular不会重构组件，而是使用与应用导航到请求的路由时创建的组件实例相同的组件实例。因为您已订阅params的观察值，所以您看到eid和name已更改。

如果路由参数发生变化，则在同一条路由上，角度路由器会在params中观察到新的参数值，这将重新评估params订阅上的代码[即在您的代码中eid和name将具有新值]。

希望它回答了您的问题，并消除了您的困惑。

Answer 2

当您通过添加到 params 可观察属性的订户接收变量 eid 和 name 的值时，会出现这种现象您已注入的ActivatedRoute服务。

在对第一个雇员的第一次请求时，angular创建组件并调用其构造函数。之后，当您点击 Next 按钮时，angular将重复使用相同的组件实例，但是ActivatedRoute服务的params属性将发出一个新事件，并带有新路径的新值

构造函数的调用行为使我感到困惑

2 个答案: