Angular 笔记（day3）

Angular 笔记（day3）

1,服务创建及使用

• 1.1 ng g s services/api
• 1.2 挂载到 app.moudel 
  • import { ApiService } from './services/api.service';

  •   providers: [ApiService], //放入需要注册的服务

  • 在组件中引入服务 import { ApiService } from '../services/api.service';

  • 在组建 构造函数中 初始化服务  constructor(public api:ApiService) { } 

2,使用HttpClientMoudel请求网络

• 2.1 app.moudel 引入模块 import { HttpClientModule} from '@angular/common/http';
• 2.2 在模块中引入 import { HttpClient, HttpHeaders } from '@angular/common/http';
• 2.3 使用

  import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  const httpOptions = {//post方式提交时需要加上头部
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  @Injectable({
    providedIn: 'root'
  })
  
  export class ApiService {
    public baseUrl: string = "http://a.itying.com/";
    public productlist: string = "api/productlist";
  
    constructor(public client: HttpClient) {}
  
    getNews() {
      return this.client.get(this.baseUrl + this.productlist)
    }
  }
  

   

3,使用Axios请求网络

• 3.1 引入Axios 库 npm install axios --save
• 3.2 在组件中直接使用  import axios from 'axios';
• 实例如下：

  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  import axios from 'axios';
  @Injectable({
    providedIn: 'root'
  })
  
  export class ApiService {
    public baseUrl: string = "http://a.itying.com/";
    public productlist: string = "api/productlist";
  
    constructor() { }
  
    getNewsFromAxios() {//将网络请求分装层Rxjs模式，也可封装层 promise 模式
      return new Observable((result) => {
        axios.get(this.baseUrl + this.productlist).then((response) => {
          result.next(response.data);
        }, (error) => {
          result.error(error);
        })
      });
    }
  }
  

   

4,路由 

• <router-outlet></router-outlet>用于挂载路由
• 4.1注册路由 在app.routing 中注册

• import { NewsComponent } from './news/news.component';
  import { NewsdetailComponent } from './newsdetail/newsdetail.component';
  const routes: Routes = [
    {
      path: "news",
      component: NewsComponent
    },{//静态路由
      path: "newsdetail",
      component: NewsdetailComponent
    },
    {//动态路由
      path: "product/:aid",
      component: ProductComponent
    },
    {//默认路由
      path: "**",
      redirectTo: "news"
    }
  ]

• 静态路由  <a [routerLink]="['/newsdetail']" > {{item.title}}</a>
• 动态路由   <a [routerLink]="['/product/',item._id]">{{item.title}}</a>
• 获取动态路由的值 

导入 import { ActivatedRoute } from '@angular/router';

1. import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   @Component({
     selector: 'app-product',
     templateUrl: './product.component.html',
     styleUrls: ['./product.component.scss']
   })
   export class ProductComponent implements OnInit {
   
     constructor(public router: ActivatedRoute) {
       this.router.params.subscribe(prams=>{
         console.log(prams);
         
       })
   
     }
   
     ngOnInit() {
     }
   
   }
   

    

2. JS跳转

• import { Router } from '@angular/router';

• 构造函数初始化  constructor(public router:Router) { }

• 方法中调用 this.router.navigate(['/product/','56']);

   3.路由 get  传值 js 跳转   （get传值不用在路由中配置传值参数）

import { Router, NavigationExtras } from '@angular/router';

let prams: NavigationExtras = {
      queryParams: { aid: 'aaa', id: "36985" },
      fragment:'top'
    }
    this.router.navigate(['/newsdetail'], prams);

//接收参数代码
constructor(public router: ActivatedRoute) {
    this.router.queryParams.subscribe(prams => {
      console.log(prams);
    })
  }

4.父子路由

{
    path: 'news',
    component: NewsComponent,
    children: [
      {
        path: 'newslist',
        component: NewslistComponent
      },
      {
        path: 'newsadd',
        component: NewsaddComponent
      }
    ]
  },