标签：sub username active 配置路由 成功 def var tco client
在 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‘ } ];
<a [routerLink]="[‘/homepage‘]" routerLinkActive="active">首页</a>
<a [routerLink]="[‘/cards‘]" routerLinkActive="active">填单</a>
路由带参传递
<a routerLink="/detail/{{item.id}}"></a>
在声明路由配置中：
<a routerLink="/detail/{{item.id}}">
标签：sub username active 配置路由 成功 def var tco client
原文地址：https://www.cnblogs.com/liao123/p/10895697.html
