三、angular7登录请求和路由带参传递

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';

imports: [ BrowserModule, HttpClientModule ] 在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http"; 构造函数声明 constructor(public http:HttpClient) { }双向数据绑定： public username=""; publci password="";在表单中添加绑定：

[(ngModel)]="username"

[(ngModel)]="password"

登录函数

doLogin(){
const httpOptions={
headers:new HttpHeaders({
'Content-Type':'application/json'
})
};
var api='http://192.168.31.42:8087/user/login';
this.http.post(api,{
username:this.username,
password:this.password
},httpOptions).subscribe(respone=>{
console.log(respone);
});
}

登录成功后路由跳转：

this.router.navigate(['/homepage']);

2，路由跳转

找到 app-routing.module.ts 配置路由

// 配置路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
} ];