zoukankan      html  css  js  c++  java
  • Angular5学习笔记

    一、创建服务

    ng generate service service-name #简写 ng g s component-name
    ng g s services/userService

    二、效果

     

     三、开发服务

    修改srcappservicesuser-service.service.ts文件

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/toPromise';
    
    @Injectable()
    export class UserServiceService {
      private api = 'http://localhost:3003';  // 服务器地址
      private gundamList = '/news';     // 获取全部
      private getGundam = '/detail';          // 获取明细
    
      constructor(private http: Http) { }
       // 获得全部数据
       getGundams(): Promise<any[]> {
        return this.http.get(this.api + this.gundamList)
                 .toPromise()
                 .then(response => response.json())
                 .catch(this.handleError);
      }
    
      // 根据Id查询高达
      getGundamById(id: number): Promise<object> {
        console.log(this.api + this.getGundam + '?id=' + id);
       return this.http.get(this.api + this.getGundam + '?id=' + id)
                       .toPromise()
                       .then( response => response.json())
                       .catch(this.handleError);
      }
    
      private handleError(error: any): Promise<any> {
       console.error('An error occurred', error); // for demo purposes only
       return Promise.reject(error.message || error);
      }
    }

    四、全局注册服务

    修改srcappapp.module.ts文件

    import {UserServiceService} from './services/user-service.service';
    
    
      /* 注册服务 */
      providers: [UserServiceService],

    五、使用服务

    修改srcappcomponentsuserslistlist.component.ts文件

    import {Component, OnInit} from '@angular/core';
    /*import { Http } from '@angular/http'; 添加Http请求模块 */
    import {UserServiceService} from '../../../services/user-service.service';
    import {
      ActivatedRoute,
      Params
    } from '@angular/router';
    
    @Component({
      selector: 'app-list',
      templateUrl: './list.component.html',
      styleUrls: ['./list.component.css']
    })
    export class ListComponent implements OnInit {
      /* 变量定义 */
      data:object[] = [];/* 定义列表数据变量 */
      
      /* 构造方法,做依赖注入 */
      constructor(
        // private _httpService: Http,
        private route: ActivatedRoute,
        private _userServiceService: UserServiceService
      ) {
    
      }
    
      /* 加载完事件,做初始化 */
      ngOnInit() {
        // this._httpService.get('http://localhost:3003/news').subscribe(values => {
        //   console.log(values);
        //   this.data = values.json();
        // });
        this._userServiceService.getGundams().then(gundams => this.data = gundams.slice(0, 3)); // 让主页只显示3个
      }
    
    }

    备注:

    Error: ELOOP: too many symbolic links encountered……
    ELOOP: too many symbolic links encountered, stat ……

     六、运行效果,可正常请求到数据。

    解决方案

    删除node_modules文件夹, 重新npm install,不能用cnpm

  • 相关阅读:
    装饰者模式
    代理模式
    享元模式
    模板模式
    命令模式
    建造者模式
    单例模式
    观察者模式
    迭代器模式
    访问者模式
  • 原文地址:https://www.cnblogs.com/chuancheng/p/8379978.html
Copyright © 2011-2022 走看看