Question

我有， 1.topbar文件夹-包含topbar的html（1）和ts（1） 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>

现在我在ts（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

您可以从rxjs使用主题，

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

没有HTML的两个组件之间的角度共享

1 个答案: