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

Posted 2021-12-02 liao123

在 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‘
} ];

routerLink 跳转页面

<a [routerLink]="[‘/homepage‘]" routerLinkActive="active">首页</a>

<a [routerLink]="[‘/cards‘]" routerLinkActive="active">填单</a>

路由带参传递

 <a routerLink="/detail/{{item.id}}"></a>

在声明路由配置中：

 <a routerLink="/detail/{{item.id}}">