如何使用表单发布方法将参数从简单的 html 页面传递到另一个角度页面？

Question

this is my simple test.html file and i wanted to pass employeeId to localhost:4200/homePage. When i use get method then it working fine but with post getting error Cannot Post

<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>

On the homePage-component.ts file i am using this code--

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

Answer 1

Basically you want to send data from page1 component to page2 component and route to that component in Angular on submit of the form.

You should make use of (ngSubmit) directive available by Angular

Try making following changes :

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}}])
}

home.component.html

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

home.component.ts

employeeId : String

constructor(private route : ActivatedRoute) {} 

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

You will also need to define routes in your application. Check out official docs for more info.