Question

我有三个组件：A，B和C：组件A有一个变量x：number和一个增加变量值的函数。这是我的代码片段。

export class AComponent{
   x:number = 1;
   inc():void
   {
      x += 1;
   }
}

B和C组件都有一个显示变量x值的A模板。我的问题是如何调用组件B中的inc（）函数并更改B和C两个模板中的值？

例如，当我单击B中的按钮并将x的值增加1以获得2时，B和C都应显示2.

Answer 1

最简单的方法是创建服务：

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

@Injectable()
export class MyService {

    private _x:number = 0;

    get x():number {         
       return this._x;
    }

    inc() {
       this._x = this._x + 1;
    }
}

然后，从任何其他组件中，您只需注入服务并使用它：

export class AComponent {

    constructor(private _svc:MyService) { }

    doSomething() {
        // read the value
        console.log(this._svc.x);

        // increase it
        this._svc.inc();
    }

}

请务必将您的服务添加到app.module.ts部分的providers。

此具体沟通策略可在以下网址找到：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

对于组件之间的其他通信方法，请检查： https://angular.io/docs/ts/latest/cookbook/component-communication.html#

如何共享变量并跟踪它在角度v4 ts中的多个组件的变化

1 个答案: