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

种颗好白菜

已于 2022-05-13 12:45:38 修改

阅读量1.2k

点赞数

分类专栏： angular 文章标签： angular.js javascript ecmascript

于 2022-05-13 12:43:20 首次发布

本文链接：https://blog.csdn.net/m0_65503310/article/details/124749587

版权

本文介绍了在AngularJS应用中实现页面间数据传递的方法，通过创建一个名为shareService的服务来存储和操作数据。详细讲解了如何使用ngModel进行双向绑定，以及在不同组件之间通过shareService获取和设置数据，实现数据的实时同步。

摘要由CSDN通过智能技术生成

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

首先我们需要两个页面，且可以相互跳转。可参考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];
      }
      clea