Angular 5 在两个组件之间共享函数和变量

Question

我需要两个独立组件的全局函数。我正在使用主HTML页面上的选择器加载两个角度组件。一个具有功能按钮，其功能也必须影响另一个组件中的内容。

我意识到这不容易做到...你们如何在两个角度组件之间设置共享函数和变量？我正在尝试创建一个按钮，该按钮可以在两个单独的组件中加载选项卡内容。使用 Angular 本地存储是存储某些函数和变量的解决方案吗？

提前感谢，

Answer 1

服务非常简单。

export class ExampleService {
   public sharedVariable: any;
   public sharedFunction() {
       // your implementation
   }
}

export class Component1 {
    public constructor(private service: ExampleService) {
        this.service.sharedFunction();
        this.service.sharedVariable;
    }
}
export class Component2 {
    public constructor(private service: ExampleService) {
        this.service.sharedFunction();
        this.service.sharedVariable;
    }
}

在使用公共类的情况下，您将获得两个不同的sharedVariable引用，如果您更改第一个组件中的变量值，则不会影响第二个组件，但是如果您使用service则默认情况下，该服务在 angular 中是单例的，因此您将在两个组件中获得相同的值，但仅从任何地方更改值。

export abstract class BaseClass {
   public sharedVariable: any;
   public sharedFunction() {
       // your implementation
   }
}

export class Component1 extends BaseClass {
    public constructor() {
        super();
        this.sharedFunction();
        this.sharedVariable;
    }
}
export class Component2 extends BaseClass {
    public constructor() {
        super();
        this.sharedFunction();
        this.sharedVariable;
    }
}

希望有帮助。