angular设置全局变量，修改监听变量

Angular全局服务通信

最新推荐文章于 2024-11-29 16:06:35 发布

转载最新推荐文章于 2024-11-29 16:06:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mary-123/p/11206694.html

文章标签：

#javascript #网络 #ViewUI

本文介绍如何在Angular项目中创建全局服务以实现组件间的数据共享。通过定义service.module.ts和global.service.ts文件，可以轻松地在不同组件之间传递数据。文章详细展示了如何在一个组件中设置值并在另一个组件中订阅这些值。

创建service.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { SomeSharedService } from './global.service';
export {
  SomeSharedService
}

@NgModule()
export class ServicesModule { 
  static forRoot():ModuleWithProviders{
    return {
      ngModule:ServicesModule,
      providers:[SomeSharedService]
    }
  }
}

新建global.service.ts

import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class SomeSharedService {
  public globalVar:BehaviorSubject<any[]> = new BehaviorSubject([]);
  public pageLimit = 10;
}

在组件1中引入服务并获取值

...
import { SomeSharedService } from 'src/app/services/global.service';
.....
  constructor(
    private someSharedService: SomeSharedService
  ) { 
  }

  ngOnInit() {
    this.someSharedService.globalVar.subscribe(d=>{
      this.clumb = d;
    })
  }
....
}

在组件2中引入服务并设置值

import { SomeSharedService } from 'src/app/services/global.service';
....
...
  constructor(
    private someSharedService$:SomeSharedService
  ) {}

 
  getProjectName(id:Number){
    this.someSharedService$.globalVar.next(['我的项目',{id:id,name:res.data.project_name}]
  }
....
}

这里设置了新的值，在组件1订阅到改变后的值。

转载于:https://www.cnblogs.com/mary-123/p/11206694.html