angular5 简单服务

最近在开发一个服务管理系统，开发语言angualr5，接到这个任务的时候脑袋都大了，真是硬着头皮接的，碰到的第一个问题就是数据共享这一块，登录返回的信息要传给多个页面，官网上给出的解决方案1.父子组件间用input和output;2.用服务来传递数据；

当我尝试用服务传递数据的时候我就疯了，官网上一个又一个的文件写来写去，咬着牙看下来的还是半懂不懂的，现在理解了就觉得官网写的太复杂了，整理一下

1.写一个服务auth.service.ts，在这个页面请求用户信息

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import { userDetial } from '../modules/user';
@Injectable()
export class AuthService {
  public email:any;
  public userData=new userDetial();
  constructor(private userHttp: HttpClient,) { this.userPublic();}
  userPublic(){
    //请求用户信息，将用户信息保存在userData
    this.userHttp.get('/v1.1/application/info')
    .subscribe(req => {this.userData = req;});
  }
}

2.在头部head.component.ts中调用服务，在别的组件中使用该服务一样的导入就行了

import { Component } from '@angular/core';
//导入服务
import { AuthService } from '../services/auth.service';

export class HeadComponent {
        constructor(public authService: AuthService) { }
}

3.在页面head.component.html输出信息就可以了

<div>{{authService.userData.appName}}</div>

最终效果就是在头部和个人信息页面，账户设置页面都能拿到数据

上面第一步的import { userDetial } from ‘../modules/user’;是导入实体类，简单的说就是把参数类型都定义在一个ts文件里，用的时候直接导入然后public userData=new userDetial();

user.ts代码如下

import { Map, List } from './commonclass';

export class userDetial {
  appId: string;
  appName: string;
  appAvatar: string;
  phone: string;
  email: string;
}