Функция передачи с Depenancy Injection от одного компонента к другому

Question

Компонент A принимает функцию как в переменной @Input (). При нажатии кнопки компонента вызывается функция.

// arming-button.component.ts
import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-arming-button',
  templateUrl: './arming-button.component.html',
  styleUrls: ['./arming-button.component.scss']
})
export class ArmingButtonComponent implements OnInit {

  @Input()
  confirmedFunction;

  constructor() { }

  ngOnInit(): void {
  }

}

// arming-button.component.html
    <button type="button" (click)="confirmedFunction()">Click Me</button>

Это не работает, поскольку переданная функция может содержать ссылки на функции DI и т. Д. c. Например:

// other.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-arming-button',
  templateUrl: './arming-button.component.html',
  styleUrls: ['./arming-button.component.scss']
})
export class ArmingButtonComponent implements OnInit {


  constructor(private http: HttpClient) { }

  ngOnInit(): void {
  }

  doSomething(): void {
    // arming-button component has no reference to this.http
    this.http.get('someUrl.com/stuff')
        .subscribe(response => console.log(response)); 
    }

}

// other.component.html
<app-arming-button [confirmedFunction]="doSomething"></app-arming-button>

Как передать функцию другому компоненту таким образом, чтобы поддерживать внутренние ссылки на функции? Я могу придумать несколько ужасных хакерских способов сделать это, но ни один из них не делает этот компонент многократно используемым. Любые подсказки были бы великолепны.

Answer 1

Вы должны использовать ввод и вывод для достижения этого, т.е. в ваших other.component.ts, пожалуйста, используйте этот код

doSomething(status) {
// Perform your operation
}

Other.component. html

<app-arming-button (confirmedFunction)="doSomething($event)"></app-arming-button>

Постановка на охрану -button.component.ts

confirmedFunction = new EventEmitter<any>();

confirmedButtonClicked(){
this.confirmedFunction.emit(true);
}

Arming-button.component. html

<button type="button" (click)="confirmedButtonClicked()">Click Me</button>

Я думаю, это поможет вам достичь того, чего вы хотите.