我是 Angular 的新手，所以如果這個(gè)問題聽起來有點(diǎn)不對(duì)勁，請(qǐng)?jiān)徫遥以诶斫馊绾卧谶@個(gè)項(xiàng)目中實(shí)現(xiàn)編輯時(shí)遇到問題。單擊編輯鏈接后，我希望將 ID 發(fā)送到 EditEmployeeComponent.ts這是我的路線{ path: 'edit/:id', component: EditEmployeeComponent },在app.module.ts這里是錨標(biāo)記：<a class="btn" [routerLink]="['/edit/',emp.employeeId]" >Edit</a>EditEmployeeComponent.tsimport { Component, OnInit } from '@angular/core';import { EmployeeService } from '../../Services/employeeservice.service';import { MyEmployees } from '../../Services/Employee';import { Employee } from '../Employee/Employee';import { ActivatedRoute } from '@angular/router';import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';@Component({ selector: 'my-component', templateUrl: 'edit-employee.component.html'})export class EditEmployeeComponent implements OnInit { errorMessage: string = ''; public emps: Employees; employeeId: number; employeeForm: FormGroup; model = new Employee('', ''); constructor(private _employeeService: EmployeeService, private _avRoute: ActivatedRoute, private _fb: FormBuilder) { if (this._avRoute.snapshot.params['employeeId']) { this.employeeId = this._avRoute.snapshot.params["employeeId"]; }} ngOnInit(){ if (this.employeeId > 0) { console.log(this.employeeId); this._employeeService.edit(this.employeeId) .subscribe(() => { this.emps = this._employeeService.employee } , error => this.errorMessage = 'undefine property'); }}這也是我的_employeeService 類public edit(id) {let token = localStorage.getItem("jwt");return this._http.get('api/Employee/EditEmployeeGet?id=' + id, { headers: new HttpHeaders({ "Authorization": "Bearer " + token, "Content-Type": "application/json" })}) .map((data: Employees) => { this.employee = data; return true; });}
1 回答
MMMHUHU
TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊
在您的路由器鏈接中將代碼更改為此，尾隨的“/”無法與您定義的路由匹配：
[routerLink]="['/edit', emp.employeeId]"
同樣在您的組件中，您必須使用"id"以下方式獲取參數(shù)：
this._avRoute.snapshot.params['id']
但更好的方法是在ngOnInit()生命周期鉤子中調(diào)用服務(wù)，而不是constructor. 您需要訂閱 Observable ActivatedRoute.params，它將對(duì) URL 中參數(shù)的更改做出反應(yīng)。
@Component({
selector: 'hello',
template: `<h1>Employee Details</h1>
<div *ngIf="emps$ | async; let emps">
<h3> Id: {{emps.id}}</h3>
<h3> Name: {{emps.name}}</h3>
<h3> Age: {{emps.age}}</h3>
</div>`,
styles: [`h1, h3 { font-family: Lato; }`]
})
export class EditEmployeeComponent {
emps$: Observable<any>;
constructor(private _empService: EmployeeService, private _avRoute: ActivatedRoute, private _fb: FormBuilder){
}
ngOnInit(){
this._avRoute.params.subscribe(params => {
this.emps$ = this._empService.getEmployeeDetails(params['id']);
});
}
}
我為你創(chuàng)建了一個(gè)小演示：https : //stackblitz.com/edit/angular-hdvpzm
- 1 回答
- 0 關(guān)注
- 156 瀏覽
添加回答
舉報(bào)
0/150
提交
取消