在Angular 8中,您可以使用HttpClient模块来进行POST请求,并使用Router模块进行重定向,而不必直接操作DOM。下面是一个示例代码:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
formData = {
name: '',
email: ''
};
constructor(private http: HttpClient, private router: Router) { }
onSubmit() {
// 发送POST请求
this.http.post('your-api-url', this.formData).subscribe(response => {
// 重定向到某个页面
this.router.navigate(['/success']);
});
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-success',
template: 'Form submitted successfully!
'
})
export class SuccessComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { FormComponent } from './form.component';
import { SuccessComponent } from './success.component';
const routes: Routes = [
{ path: '', component: FormComponent },
{ path: 'success', component: SuccessComponent }
];
@NgModule({
declarations: [
AppComponent,
FormComponent,
SuccessComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,当用户提交表单时,会发送一个POST请求,并在成功后重定向到成功页面。