时间戳

首页 > 解决方案 > 如何在Angular7中使用另一个组件中的变量

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

问题描述

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

我尝试使用 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 中的值

标签： angulartypescriptvariablescomponentsscopes

解决方案

如果你想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文件中。将其添加provider到app.module.ts.

然后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);
    }
}

推荐阅读