如何在Angular7中使用另一个组件中的变量答案

【问题标题】：How to use a variable from a component in another in Angular7如何在Angular7中使用另一个组件中的变量
【发布时间】：2019-12-03 22:50:01
【问题描述】：

我想知道是否可以将一个组件中的变量值使用到另一个组件中，而不必使用第一个组件的模板，只需要变量的值即可。当我更改 de 值时出现的问题的变量，当我导入它时，值不会改变。有可能吗？

我尝试使用 this.fotoTobillo.imageTobillo 并使用 get 方法导入变量，但结果是相同的

FotoTobilloPage.ts

export class FotoTobilloPage implements OnInit {

imageTobillo: string;

constructor(private camera: Camera) {
 }

ngOnInit() {

}

public getimageTobillo() {
  return this.imageTobillo;
}
public onClick() {
  this.imageTobillo = 'NewValue';
}
}

FormularioPage.ts

export class FormularioPage implements OnInit {

imagenPie: string;
imagenTobillo: string;

constructor( private fotoTobillo: FotoTobilloPage ) {
  this.imagenTobillo = this.fotoTobillo.getimageTobillo;
  console.log(this.imagenTobillo);
}
ngOnInit() {
  console.log(this.imagenTobillo);
}
}

我希望我可以更改 FotoTobilloPage.imageTobillo 的值，并且我可以获取 FormularioPage 中的值

【问题讨论】：

是子组件吗？您可以将其添加为输入变量并作为输出监听任何更改。或者您可以将变量放在服务中并从那里读取更改。
您尝试将值从一个组件传递到另一个组件的方法是什么？
您可以尝试 ngOnchanges() 生命周期 hoot 来检测更改。

标签： angular typescript variables components scopes

【解决方案1】：

如果您想通过将component 注入constructor 来访问该方法，您只需提供服务即可。

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

@Injectable()
export class FotoTobilloService {

    imageTobillo: string;

    constructor(private camera: Camera) {
    }

    getimageTobillo() {
        return this.imageTobillo;
    }
    public onClick() {
        this.imageTobillo = 'NewValue';
    }
}

将以上代码保存在.ts 文件中。将其添加到 app.module.ts 中的 provider 数组中。

然后import你component中的类来使用它...

export class FormularioPage implements OnInit {

    imagenPie: string;
    imagenTobillo: string;

    constructor( private fotoTobillo: FotoTobilloService ) {
        this.imagenTobillo = this.fotoTobillo.getimageTobillo();
        console.log(this.imagenTobillo);
    }
    ngOnInit() {
        console.log(this.imagenTobillo);
    }
}

【讨论】：