Question

我正在使用Angular4和angular-cli重建一个旧的Web平台（用php编码）。

我正在寻找一种在名为my-configuration的组件中声明多个变量一次的方法，这样我就可以直接在其他组件中使用它们，例如my-footer，而无需重新声明它们：

MY-configuration.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

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;
    }
}

这样做的正确方法是什么？

Answer 1

在整个应用程序中共享数据的推荐方法是使用Angular服务。它们被定义为单例，因此您保留的任何值都可供整个应用程序使用。

您可以在此处找到有关服务的更多信息：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

我只是整理了一篇博客文章和一名说明如何执行此操作的文章：

http://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

enter code here

https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Answer 2

查看环境/ environment.ts，您可以将变量放在那里，或者可以像这样使用

 export const config = {
  variable1: 'ble',
  variable2: 'bla'
};

Answer 3

如果您的两个组件有父子关系，您可以使用@ViewChild（）或@Output（），否则服务是共享数据的最佳方式。

您可以找到有关组件通信的更多信息 https://angular.io/docs/ts/latest/cookbook/component-communication.html

如何在Angular2中将变量值从一个组件传递到另一个组件

3 个答案: