Angular 在 Component1 上执行从 component2 触发的方法（不相关的组件）

Question

我有 2 个组件。

组件 1 和组件 2

在组件 1 中，我有一个由用户触发的方法

<div (click)="trigger('parameter here')">run trigger</div>

然后在 .ts 上：

trigger(param) {
    // Code to "param" to send to Component2 and run executeThis()
}

在component2中我还有一个方法：

executeThis(param) {
    console.log(param);
}

这 2 个组件不相关。

我该怎么做？

Answer 1

您必须将 component2 注入到 component1 中。那么你的触发函数就变成了

trigger(param) {
  this.component2.executeThis(param);
}

Component2 实际上是一个服务。参见 https://angular.io/guide/dependency-injection#injecting-services

如果 component2 确实是一个组件（即 html），我会将两个组件使用的代码移动到共享服务中。

Answer 2

您可以为此使用服务。
在服务中声明一个新的 EventEmitter：

export class TriggerService
{
  public trigger = new EventEmitter<any>();
}

然后在您的 component1 中发出这样的事件：

trigger(param)
{
  this.triggerService.trigger.emit(param);
}

并在您的组件 2 中订阅 EventEmitter：

constructor()
{
   this.triggerService.trigger.subscribe(param => {
     this.param = param;
     this.executeThis();
   });
}

并在 executeThis 中记录参数：

executeThis()
{
  console.log(this.param);
}

Answer 3

您可以通过创建共享服务并使用 typescript 访问器来实现此目的 setter getter

shared.service.ts

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

@Injectable({
 providedIn: 'root'
})
export class SharedService {
sharedValue;

constructor() {}

set someValue(value) {
  this.sharedValue = value
 } 

get someValue() {
  return this.sharedValue
 }
}

分量 1 设定值

constructor(private service: SharedService) {} // inject service

 trigger(param) {
 // set value
 this.service.someValue = param
}

组件 2 获取值

constructor(private service: SharedService) {} // inject service

executeThis() {
  // get value
  console.log(this.service.someValue);
}

Angular 在 Component1 上执行从 component2 触发的方法（不相关的组件）

Angular execute a method on Component1 triggered from component2 (unrelated comps)

typescript

angular

angular9