Angular 2 - 使用共享服务

2024-04-25

看起来共享服务是解决许多情况的最佳实践,例如组件之间的通信或替换旧的 Angular 1 的 $rootscope 概念。我正在尝试创建我的服务,但它不起作用。有什么帮助吗?泰!!!

应用程序组件.ts

import {Component} from 'angular2/core';
import {OtherComponent} from './other.component';
import {SharedService} from './services/shared.service';
@Component({
selector: 'my-app',
providers: [SharedService],
directives: [OtherComponent],
template: `
    <button (click)="setSharedValue()">Add value to Shared Service</button>
    <br><br>
    <other></other>
`
})
export class AppComponent { 
data: string = 'Testing data';
setSharedValue(){
    this._sharedService.insertData(this.data);
    this.data = '';
    console.log('Data sent');
}
constructor(private _sharedService: SharedService){}
}

其他组件.ts

import {Component, OnInit} from "angular2/core";
import {SharedService} from './services/shared.service';
@Component({
selector : "other",
providers : [SharedService],
template : `
I'm the other component. The shared data is: {{data}}
`,
})
export class OtherComponent implements OnInit{
data: string[] = [];
constructor(private _sharedService: SharedService){}
ngOnInit():any {
    this.data = this._sharedService.dataArray;
}
}

大多数时候,您需要在引导应用程序时定义共享服务:

bootstrap(AppComponent, [ SharedService ]);

并且不在 内再次定义它providers您的组件的属性。这样,您将拥有整个应用程序的服务的单个实例。


就你而言,自从OtherComponent是你的子组件AppComponent一、只需删除providers像这样的属性:

@Component({
  selector : "other",
  // providers : [SharedService], <----
  template : `
    I'm the other component. The shared data is: {{data}}
  `,
})
export class OtherComponent implements OnInit{
  (...)
}

这样,他们将为两个组件共享相同的服务实例。OtherComponent将使用父组件中的组件(AppComponent).

这是因为 Angular2 的“分层注入器”特性。有关更多详细信息,请参阅此问题:

  • 在 Angular 2(Beta)中将一项服务注入另一项服务的最佳方法是什么? https://stackoverflow.com/questions/34804298/whats-the-best-way-to-inject-one-service-into-another-in-angular-2-beta/34807397
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 - 使用共享服务 的相关文章

随机推荐

  • Windows Phone 应用程序栏的图标颜色

    应用栏图标的颜色到底什么时候改变 即从白色变为黑色 或从黑色变为白色 当主题从黑色切换为白色时 或者当应用程序栏的背景画笔改变时 如果我想应用自己的自定义主题 以便应用程序栏始终为白色 该怎么办 我使用黑色图标 但即使应用程序栏是白色的 因
  • 编写跨环境传输的 URL 的安全方法

    我目前正在本地计算机上开发一些软件 为了这个问题 我们来调用一下这个软件StackOverflow 我有以下页面 C sites StackOverflow index php C sites StackOverflow content p
  • Javascript - 如何创建按键事件?

    我在互联网上查找过这一点 我所能找到的都是已弃用的函数 在发布之前请检查以确保您建议的代码没有被弃用 我发现了这个并尝试过 https developer mozilla org en US docs Web API KeyboardEve
  • Python Flask 应用程序在本地运行,但在 Heroku 上托管时返回 AttributeError

    我正在开发大学申请 该 Web 应用程序使用 joblib 加载给定模型 并且为了工作 它使用了 FlexibleScaler 类 灵活 py from sklearn preprocessing import MinMaxScaler S
  • 将自定义文件夹添加到 bazel java 测试中的类路径

    我正在尝试将大型代码库从 Maven 迁移到 bazel 我发现一些测试写入target classes and target test classes并且生产代码将其读取为类路径上的资源 这是因为 maven Surefire fails
  • E2E:使用 Wix Detox 从 UIImagePickerController 选择图像

    Description 我需要编写一个 e2e 测试 在某些时候它必须在 UIImagePickerController 中选择一个图像 我尝试使用element by type UIImagePickerController tapAtP
  • 如何使用python opencv2减去两个图像以获得前景对象

    有没有办法在 python opencv2 中减去两个图像 图片 1 任何图像 例如房屋图像 静态图像 图 2 带有物体的同一图像 在房子里 一个人站着 静态图像 动态物体 图片 3 图片 2 图片 1 如果我们减去Image2 from
  • Azure 中的 EUAP 区域是什么?

    Azure 中的某些区域被称为 EUAP 区域 但是我无法找到任何关于这意味着什么的定义 EUAP 代表什么 https learn microsoft com en us dotnet api microsoft azure docume
  • 如何使用 Objective-C 用空格分隔字符串?

    假设我有一个像这样的字符串 hello world this may have lots of sp ace or little space 我想将此字符串与此分开 hello world this may have lots of sp
  • MySQL 更新时会覆盖相同值的列吗?

    在MySQL中更新表时 例如 Table user user id user name 1 John 2 Joseph 3 Juan 如果我运行查询 UPDATE user SET user name John WHERE user id
  • 单击之前搜索查看查询提示

    我有一个搜索视图和一个查询提示属性 但是 只有在单击搜索视图后才会出现提示 有没有办法让它在点击之前出现
  • SonarQube 6.7 登录时冻结

    我刚刚在带有 MySQL 5 7 的 Ubuntu 16 04 服务器上安装了 SonarQube 6 7 我的同事使用 SonarQube 他们从托管在 GitHub 存储库上的源代码添加了他们的项目 添加了 3 4 个项目后 我们在 M
  • 使用mongoose在mongodb模式中使用ensureIndex

    我想打电话ensureIndex on the authorName 命令是什么以及我应该将其放在这段代码中的什么位置 var mongoose require mongoose defines the database schema fo
  • seo - 图像和 h1

    我遇到一种情况 我想坚持使用我的徽标而不是 h1 标签的实际文本 如果我将关键字放在 alt 标签中 而不是实际编写 我会在 SEO 上受到影响吗 文本和图像同时存在更好吗 想法 div h1 a href img src logo jpg
  • Spark 编码器:何时使用 beans()

    我在使用Spark的缓存机制时遇到了内存管理问题 我目前正在使用Encoder我正在使用 Kryo 想知道切换到 beans 是否可以帮助我减少缓存数据集的大小 基本上 在使用时使用 beans 相对于 Kryo 序列化有哪些优点和缺点En
  • 已将数据预先填充到资产中的领域?

    通常我使用 Realm 作为 RealmConfiguration config new RealmConfiguration Builder applicationContext deleteRealmIfMigrationNeeded
  • 匹配嵌套的html注释块正则表达式[重复]

    这个问题在这里已经有答案了 我有这个 html 代码块 some html content here top base some html content here 1 top some html content here 2 top so
  • Magento Connect 登录后尝试更改为什么路径?

    我每次都会收到错误消息 部署 FTP 错误 登录后无法 chdir 我通过 chmod ing 我的 complete path to magento installation dir 成功完成了第一次连接和设置下载器 至 0777 在 d
  • Apache Tomcat 服务器不在添加新服务器的列表中

    我需要添加 Apache Tomcat 服务器 但 Apache 文件夹中只有 Geronimo 服务器 如何解决这个问题 STS 4 0 0 0 M12 STS4 发行版不包含这些开箱即用的适配器 因为我们出于各种原因 减少启动时间 减小
  • Angular 2 - 使用共享服务

    看起来共享服务是解决许多情况的最佳实践 例如组件之间的通信或替换旧的 Angular 1 的 rootscope 概念 我正在尝试创建我的服务 但它不起作用 有什么帮助吗 泰 应用程序组件 ts import Component from