typescript 如何在Angular2中将变量值从一个组件传递到另一个组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43809529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass variable value from one component to another in Angular2
提问by Alban Le Pape
I am rebuilding an old web platform (coded in php) using Angular4 and angular-cli.
我正在使用 Angular4 和 angular-cli 重建一个旧的网络平台（用 php 编码）。
I'm looking for a way to declare multiple variables once in a component called my-configuration so that I can use them directly in other components, such as my-footer, without redeclaring them:
我正在寻找一种在名为 my-configuration 的组件中一次性声明多个变量的方法，以便我可以直接在其他组件（例如 my-footer）中使用它们，而无需重新声明它们：
my-configuration.component.ts
我的配置.component.ts
import {Component} from '@angular/core';
@Component ({
selector: 'my-configuration',
templateUrl: './my-configuration.component.html',
styleUrls: ['./my-configuration.component.css']
})
export class MyConfigurationComponent {
variable1: String;
variable2: String;
constructor(){
this.variable1 = 'value1';
this.variable2 = 'value2';
}
}
my-footer.component.ts
我的footer.component.ts
import {Component} from '@angular/core';
@Component ({
selector: 'my-footer',
templateUrl: './my-footer.component.html',
styleUrls: ['./my-footer.component.css']
})
export class MyFooterComponent {
footer-variable1: String;
footer-variable2: String;
constructor(){
this.footer-variable1 = //Get the variable1 value from MyConfigurationComponent;
this.footer-variable1 = //Get the variable2 value from MyConfigurationComponent;
}
}
What is the correct method to do so?
这样做的正确方法是什么？
回答by DeborahK
The recommended way to share data throughout an application is to use an Angular service. They are defined as singletons, so any values you retain there are available to the entire application.
在整个应用程序中共享数据的推荐方法是使用 Angular 服务。它们被定义为单例，因此您保留的任何值都可用于整个应用程序。
You can find out more about services here: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html
您可以在此处找到有关服务的更多信息：https: //angular.io/docs/ts/latest/tutorial/toh-pt4.html
I just put together a blog post and a plunker showing how to do this:
我只是整理了一篇博客文章和一个 plunker，展示了如何做到这一点：
http://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/
http://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/
enter code here
回答by Fetrarij
look in environments/environment.ts , you can put your variable there, or you can use like this
查看 environment/environment.ts ，您可以将变量放在那里，或者您可以像这样使用
export const config = {
variable1: 'ble',
variable2: 'bla'
};
回答by CharanRoot
if your two component have parent and child relation ship you can use @ViewChild() or @Output() otherwise Service is the best way to share the data.
如果您的两个组件具有父子关系，则可以使用 @ViewChild() 或 @Output() 否则 Service 是共享数据的最佳方式。
you can find more information about component communication https://angular.io/docs/ts/latest/cookbook/component-communication.html
您可以找到有关组件通信的更多信息 https://angular.io/docs/ts/latest/cookbook/component-communication.html
