最近在开发一个服务管理系统,开发语言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;
}