页面间数据传递（共享数据）

数据共享：第一个页面输入的内容在不更新到服务器端的情况下，怎样在第二个页面上显示出来。

首先我们需要两个页面，且可以相互跳转。可参考angular单页应用与路由

创建数据共享的service：

ng generate service share //可以创速传建share.service.ts并自动在app.module.ts中声明

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ShareService {
  dataService:any = {
    information: {key: "aaa", value: "bbb"}
  };
  constructor(private http: HttpClient) {
  }
    getItem(key:string){
      return this.dataService[key];
    }
    getAll(){
      return this.dataService
    }
    setItem(key:string,value:any){
      this.dataService[key] = value;
    }
      deleteItem(key:string){
        delete this.dataService[key];
      }
      clear(){
        this.dataService = {};
      }
}

dataService 是专门用来存放数据的对象，里面可以存放任何类型的数据，这里相当于是一个JSON对象的成员变量，通过getItem和setItem方法 *** 作里面的键值对进行赋值和取值,dataService就相当于共享数据其它页面都可以取到，目前dataService里只有一个information等于{key: "aaa", value: "bbb"}的默认值；

这里定义了五个方法：

getItem获取dataService单个值；

setItem给dataService某一项赋值；

getAll()获取dataService所有值；

deleteItem删除dataService某一项；

clear() 清空dataService；

在src/app/blue/blue.component.html里定义一个输入框:

{{information.value}}

blue.component.ts:

import { Component, OnInit } from '@angular/core';
import { ShareService } from '../share.service';
@Component({
  selector: 'app-blue',
  templateUrl: './blue.component.html',
  styleUrls: ['./blue.component.css']
})
export class BlueComponent implements OnInit {
  list:any = [];
  information:any = {key:'',value:''};
  constructor(private shareService: ShareService) {
  }
  msgChang(){
    this.shareService.setItem('information',this.information);
  }
  ngOnInit(): void {
    this.information = this.shareService.getItem('information')
  }
}

ngModel 是数据双向绑定，这里是让输入框的值和标签h4的值绑定在一起；

ngModelChange 双向绑定的表单元素可以通过ngModelChange监听绑定值得改变，并且可以通过(ngModelChange)="msgChang()"来获取到当前绑定元素的值；

获取到改变后的值后用shareService.setItem('information',this.information)的方式将值赋给shareService中dataService的information；也就是说dataService中information.value值会跟随blue页面上的information.value同步更新。

要使用share.service.ts的前提是要导入这个文件并注入依赖：

import { ShareService } from '../share.service';

constructor(private shareService: ShareService) {   }

在ngOinit()方法里面用shareService.getItem('information')的方式将shareService中dataService的key为information的值取出赋给当前页面的information，在输入框的值没改变之前页面上显示的information.value为默认值“bbb”;

src/app/yellow/yellow.component.html:

  
yellow works!
  
    {{information.value}}
  

yellow.component.ts:

import { Component, OnInit } from '@angular/core';
import { ShareService } from '../share.service';
@Component({
  selector: 'app-yellow',
  templateUrl: './yellow.component.html',
  styleUrls: ['./yellow.component.css']
})
export class YellowComponent implements OnInit {
  information:any = {};
  constructor(private shareService: ShareService ) {
   }
  ngOnInit(): void {
    this.information = this.shareService.getItem('information')
  }
}

与blue页面一样，用shareService.getItem('information')的方式取到值就可以直接使用，这样黄色页面显示的information.value就会随着蓝色页面输入框中的值改变而改变。