首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何设置全局变量来包含方法- Angular 6服务返回的数据?

在Angular 6中,可以通过创建一个服务来设置全局变量来包含方法返回的数据。以下是一种实现方法:

  1. 创建一个新的Angular服务,可以使用Angular CLI命令ng generate service global来生成一个名为global的服务。
  2. global.service.ts文件中,定义一个全局变量,并创建一个方法来设置和获取该变量的值。例如:
代码语言:txt
复制
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalService {
  private globalData: any;

  constructor() { }

  setGlobalData(data: any) {
    this.globalData = data;
  }

  getGlobalData() {
    return this.globalData;
  }
}
  1. 在需要使用全局变量的组件中,首先导入GlobalService,并在构造函数中注入该服务。例如:
代码语言:txt
复制
import { Component } from '@angular/core';
import { GlobalService } from './global.service';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ globalData }}</div>
  `
})
export class ExampleComponent {
  globalData: any;

  constructor(private globalService: GlobalService) {
    this.globalData = this.globalService.getGlobalData();
  }
}
  1. 当服务返回数据时,调用setGlobalData()方法来设置全局变量的值。例如:
代码语言:txt
复制
import { Component } from '@angular/core';
import { GlobalService } from './global.service';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="getData()">Get Data</button>
  `
})
export class ExampleComponent {
  constructor(private globalService: GlobalService) { }

  getData() {
    // 调用服务的方法获取数据
    // 假设返回的数据为response
    this.globalService.setGlobalData(response);
  }
}

通过以上步骤,你可以在Angular 6中设置全局变量来包含方法返回的数据。在需要使用该数据的组件中,可以通过注入GlobalService并调用getGlobalData()方法来获取全局变量的值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

.NET Core TDD 前传: 编写易于测试代码 -- 全局状态

不管是如何实现全局状态, 每个全局状态变量在内存里只有一个实例. 所以如果一个类里更新了全局变量值, 那么另一个类访问该变量时候它值就是刚才被更新值....这种耦合就导致很难对测试进行设置. 针对每个测试, 我们必须创建和设置好存储全局状态对象. 或者把全局变量设定为所需值....危险信号 全局变量 调用静态字段或调用拥有静态字段静态方法. 但也仅限于该类静态方法使用了该类静态字段. ...解决办法 尽量使用本地(局部, 越窄越好)状态变量 如果第三方库使用了静态方法, 那么应该使用一个包装类对该方法进行包装. 这个包装类还是要实现一个接口. 用它时候注入该接口即可....Auth是单例模式, 而且还调用了静态方法. 现在状态是, OfficeService和Auth所包含全局状态紧密耦合到了一起.

52130

Angular 面试题汇总2-ComponentService (Angular v8+)

提供样式包装机制封装组件,使得组件样式不受外部影响。...这是 Angular 默认设置。 ViewEncapsulation.Native – 使用原生 Shadow DOM 特性。但需要考虑浏览器是否支持。...ViewEncapsulation.None – 无 Shadow DOM,并且也无样式包装 关于Angular Service 服务(Service)充当着数据访问,逻辑处理功能。...单例服务(singleton)对象,可以用于临时存放全局变量。 对于复杂全局变量,推荐使用状态管理组件(state management – Ngrx)。...这会导致出现多个服务实例,并且该服务行为不再像单例一样 。有多种方式防止这种现象: 用 providedIn 语法代替在模块中注册服务方式。 把服务分离到它们自己模块中。

942140
  • 【17】进大厂必须掌握面试题-50个Angular面试

    顾名思义,它们控制数据如何服务器流到HTML UI。 10. Angular范围是什么? Angular范围是一个引用应用程序模型对象。它是表达式执行上下文。...它是一个具有 get()方法对象,该方法被调用以创建服务新实例。提供者还可以包含其他方法,并使用 provide注册新提供者。 中级–面试问题 16. Angular是否支持嵌套控制器?...这是用于创建和配置服务方法。在这里,您可以创建一个对象,向其中添加属性,然后返回相同对象,并将工厂方法传递到控制器中。 45. 什么是Angular Global API?...高级水平–面试问题 46.在Angular中,描述如何设置,获取和清除cookie?...设置Cookies –为了以键值格式设置Cookies,使用“ put”方法

    41.3K51

    angular面试题及答案_angular面试

    — 是一个函数 — 接受一个Observer对象(包含next、error、complete方法对象)作为参数 — 返回 unsubscribe 函数,...用于取消订阅 – 作用: — 作为生产者和观察者之间桥梁,并返回一种方法解除生产者和观察者之间关系,其中观察者用于处理时间...如何优化Angular 2应用程序获得更好性能? 1)考虑AOT编译。 2)确保应用程序已经经过了捆绑,uglify和tree shaking。...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务通讯非常便利。...DOM代表是网页内容。Bom包含dom, 它还包含有浏览器属性。 Dom是一棵树结构,通过对应API来访问里面的数据

    11.1K120

    AngularDart4.0 英雄之旅-教程-06服务

    AppComponent及其子组件可以使用该服务获取英雄数据。...您可能会试图在构造函数中调用getHeroes()方法,但构造函数不应包含复杂逻辑,特别是调用服务构造函数(如数据访问方法)。 构造函数用于简单初始化,如将构造函数参数连接到属性。...你正在模拟一个超快,零延迟服务行为,通过返回一个模拟英雄立即可用Future。 将方法标记为async会自动将返回类型设置为Future。..._heroService.getHeroes().then((heroes) => this.heroes = heroes); } 该回调将组件英雄属性设置服务返回英雄列表。...您设计了服务返回一个Future和从未来获取数据组件。 你应用应该看起来像这个实例(查看源代码)。 前方路 英雄之旅已经变得更加可重复使用共享组件和服务

    2.9K10

    达观数据对AngularJS技术思考与实践

    它应该只包含单个视图业务逻辑,保持控制器职责单一最常见做法是将那些不属于控制器工作抽离到服务中,然后通过依赖注入在控制器中使用这些服务。后面会讨论依赖注入服务。...AngularJS将会遍历DOM模板, 来生成相应NG指令,所有的指令都负责针对view(即HTML中ng-model)设置数据绑定。 在HTML中: ? 在JS中: ?...目前单页面应用越来越受欢迎,而Angular在构建单页面应用上简直是标配。这样构建单页面应用特点是单页、无刷新式页面变化,每个页面包含不同数据。...一般用在控制器和工场方法中。 控制器中依赖注入: ? 工厂方法:工场方法负责创建AngularJS中大部分对象。比如指令,服务,过滤器。工厂方法一般在模块中使用。 ?...这样一,自控制器将会通过它作用域原型获取父作用域中所有方法。 ?

    5.4K150

    如何在 ASP.NET MVC 中集成 AngularJS(1)

    另外,还有最新数据库技术、最新设计模式和技术。 当选择最新软件技术时,有几个因素在起作用,其中包括如何将这些技术整合起来。...作为一个例子,在一般 JavaScript 中,错误输入变量名称会创建一个新全局变量。在严格模式下,这将抛出一个错误,因此无法意外创建一个全局变量。...你需要做是使用 $controllerProvider 服务器在配置阶段之后,动态地加载控制器。Angular 使用 $controllerProvider 服务创建新控制器。...这种方法允许通过注册方法实现控制器注册。...在下面的例子中,提供了一种用于注册和动态加载两个控制器和服务注册方法。如果你愿意,也可以包括 Angular 全部库和指令注册功能。

    7.6K60

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    ngOnChanges:当Angular设置其接收当前和上一个对象值数据绑定属性时响应。 ngOnInit:在第一个ngOnChange触发器之后,初始化组件/指令。...这是最常用方法,用于从后端服务检索模板数据。 ngDoCheck:检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。...Route Guard只是路由器运行检查路由授权接口方法。...v=bci-Z6nURgE 6.  什么是延迟加载?如何Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样用于特定业务案例模块。...如何优化Angular 2应用程序获得更好性能? 优化取决于应用程序类型和大小以及许多其他因素。但一般来说,在优化Angular 2应用程序时,我会考虑以下几点: 考虑AOT编译。

    17.3K80

    AngularDart4.0 指南-体系结构概述 顶

    该类通过属性和方法API与视图交互。  例如,这个HeroListComponent有一个heroes属性,返回服务中获取英雄列表。...ngModel通过设置其显示值属性并响应更改事件修改现有元素(通常是)行为。...大多数依赖是服务Angular使用依赖注入为新组件提供他们需要服务Angular可以通过查看构造函数参数类型判断组件需要哪些服务。...如果请求服务实例不在容器中,那么在将服务返回Angular之前,注入器将创建一个并将其添加到容器中。 当所有请求服务已经解析并返回时,Angular可以用这些服务作为参数调用组件构造函数。...提供者是可以创建或返回服务东西,通常是服务类本身。 无论应用程序组件树中级别如何,您都可以在引导期间或组件中注册提供程序。

    7.9K30

    Angular10配置webpack打包 「详细教程」

    完整命令:ng new my-app --style less 第三步:启动开发服务Angular 包含一个开发服务器,以便你能轻易地在本地构建应用和启动开发服务器。...在 src/ 文件夹里面,app/ 文件夹中包含此项目的逻辑和数据Angular 组件、模板和样式也都在这里。...这里说分离,当然只是针对一些第三方库(一般来自 node_modules),以及我们自己定义工具库(或公用方法)。 不知如何下手?首先,我们来看官网给一份 1....name: 该属性值数据类型可以是 布尔值 或者 函数(返回值为字符串),其中布尔值得为 true,此时,分离文件后生成文件名将基于 cacheGroups 和 automaticNameDelimiter...如果设置为 false,则不会进行模块分离。 cacheGroups: 该属性值数据类型为对象,它值可以继承 splitChunks.* 中内容。

    5K20

    如何在 ASP.NET MVC 中集成 AngularJS(2)

    如果你想设置断点并调试 JavaScript 文件,这是必要。你有另一种选择,就是在调试模式下,使用 RenderFormat 方法选人客户脚本标签。...Razor 数据和 AngularJS 之间桥梁 现在,我已经创建了服务器端捆绑数据收集,接下来挑战就是注入并创建服务器端和客户端 AngularJS 代码桥梁。...最初我计划创建一个常规 AngularJS 服务或者一个包含在 _Layout.cshtml 文件中能够使用 Razor 语法注入服务器端方法集。...为了克服这个限制,则需要创建一个 AngularJS 提供者。提供者功能是,能够创建提供方法集和服务实例。提供者允许你在 Angular 配置过程中创建和配置一个服务。...这个提供商将会在构造函数中被配置,设定用于动态请求应用所需程序集版本号和捆绑列表。MVC Razor 代码在构造函数中会注入服务器端数据

    8.3K100

    Angular Service入门

    1.Angular内置service Angular为了方便开发者开发,本身提供了非常多内置服务。...在企业级开发中,常用服务有以下这些: $cacheFactory 缓存服务 $compile 编译服务 $filter 通过 $filter 服务可以格式化输出数据,也可以对数据进行过滤操作 $http...因为它是一个全局变量。 2.Angular自定义Service 可以通过多种方式方式定义Service,常用使用factory定义一个service。...常见情况是使用Service共享多个controller之间数据。一个记录图书阅读系统,需要记录最后一次编辑图书信息。...Service使用 在实际开发过程中,我们需要对自己服务进行增加一下方法,或者对引入第三方服务增加一下方法,开发者可以不需要修改之前源代码,而是可以在运行时为Service增加方法

    1.2K100

    RxJS 处理多个Http请求

    有时候进入某个页面时,我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供功能来实现上述功能。...,然后在 ngOnInit() 方法中调用 http 对象 get() 方法获取数据。...这个例子很简单,它只处理一个请求,接下来我们来看一下如何处理两个请求。 Map 和 Subscribe 有些时候,当我们发送下一个请求时,需要依赖于上一个请求数据。...虽然功能实现了,但有没有更好解决方案呢?答案是有的,可以通过 RxJS 库中提供 mergeMap 操作符简化上述流程。...一旦列表 Observable 对象都发出值后,forkJoin 操作符返回 Observable 对象会发出新值,即包含所有 Observable 对象输出值数组。

    5.7K20

    Angular 6正式版发布,都有哪些新功能

    ng add @angular/material:安装并设置 Angular Material 和主题,注册新初始组件 到ng generate中。...ng add @clr/angular@next:安装设置 VMWare Clarity。...Angular Material + CDK 组件 最值得一提是用于显示分层数据树形控件,遵循数据表组件模式,CDK 包含核心指令,而 Angular Material 则提供与顶层 Material...Shakable Providers 为了让你应用更小,我们将服务引用模块改为模块引用服务,这让我们只需要构建在模块里注入服务。...之前只有 v4 和 v6 是 LTS 版本,但为了使开发者从一个主版本更新到另一个主版本更容易,并给予项目充足时间规划更新,Angular 团队表示从 v4 开始,将扩大对所有主版本长期支持。

    4.2K20
    领券