Angular Совместное использование между двумя компонентами без HTML

Question

У меня есть, папка 1.topbar - содержит html (1) и ts (1) для папки topbar 2.page - содержит html (2) и ts (2) для страницы

Теперь у меня есть КНОПКА в html (1)

<button (click)="refresh()" class="navbar-btn btn btn-success btn-md refresh">
    <span class="glyphicon glyphicon-refresh"></span> Refresh
</button>

Теперь у меня есть функция в тс (1)

refresh()
{
console.log("this is topbar html and ts");
}

СЕЙЧАС у меня есть функция в html (2)

Здесь я не хочу ничего делать!

СЕЙЧАС, у меня есть функция в ts (2)

refreshEvent(){
console.log("i want use this function in html(1) BUT HOW??")
}

Итак, когда я нажимаю кнопку , она должна вызвать refreshEvent ()

Answer 1

Вы можете использовать Предмет из rx js,

import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MyService {
    private subject = new Subject<any>();
    refresh() {
        this.subject.next();
    }
    onRefresh(): Observable<any> {
        return this.subject.asObservable();
    }
}

Компонент B:

  constractor(private myService: MyService){}
  this.$subscription = this.myService.onRefresh().subscribe(() => this.refreshEvent() );
  ngOnDestroy() {
        this.$subscription .unsubscribe();
    }

Компонент A:

constractor(private myService: MyService){}

refresh()
{
  //console.log("this is topbar html and ts");
 this.myService.refresh();
}

Если у них есть Отношения между детьми и родителями можно использовать в выходном событии, см. документацию для получения дополнительной информации: https://angular.io/guide/component-interaction