Angular学习之路-三、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' 
} ]; 

routerLink 跳转页面

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

  

路由带参传递

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

在声明路由配置中：

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

 

 

查看更多关于Angular学习之路-三、angular7登录请求和路由带参传递的详细内容...