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

Posted 2023-02-23

【中文标题】如何在Angular7中使用另一个组件中的变量

【英文标题】：How to use a variable from a component in another in 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 来检测更改。

【参考方案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);