如何使用表單發布方法將參數從簡單的 html 頁面傳遞到另一個角度頁面？

Question

這是我的簡單 test.html 文件，我想將 employeeId 傳遞給 localhost:4200/homePage。 當我使用 get 方法時，它工作正常但發布錯誤無法發布

<form action="localhost:4200/homePage" name="goToAngular" method="post">
<input type="text" name="employeeID" value="" id="apiUrl" id="employeeID"/>
<input type="submit" value="go"/>
</form>

在 homePage-component.ts 文件中，我使用了這個代碼——

this.route.queryParams.subscribe((params: Params) => 
this.empID = params['employeeID'];
}

Answer 1

基本上，您希望將數據從page1 component發送到page2 component並在提交表單時route到 Angular 中的該組件。

您應該使用Angular提供的(ngSubmit)指令

嘗試進行以下更改：

page1.component.html

<form (ngSubmit)="formSubmit()">
<input type="text" name="employeeID" value="" id="apiUrl" id="employeeID" [(ngModel)]="empId" />
<button type="submit">Submit</button>
</form>

page1.component.ts

empId = "";

constructor(private router : Router) {} 

formSubmit(){
  this.router.navigate(['/home',{queryParameter : {employeeId : this.empId}}])
}

主頁.component.html

<div>{{employeeId}}</div>

home.component.ts

employeeId : String

constructor(private route : ActivatedRoute) {} 

ngOnInit(){
 this.route.queryParamters.subscribe(data=>{
   this.employeeId = data['employeeId']
 })
}

您還需要在應用程序中定義路由。 查看官方文檔了解更多信息。