嗨,我是角的新手,我试着从另一个组件调用一个组件函数,我正在阅读其他类似的问题,但是它们有一个场景,其中组件是子或兄弟级的组件,声明在html上,但是我的场景是不同的,我使用了下面的代码,但是它不能工作(方法不调用)
MessageService:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MessageService {
private _listners = new Subject<any>();
listen(): Observable<any> {
return this._listners.asObservable();
}
filter(filterBy: string) {
this._listners.next(filterBy);
}
}ClassA:
@Component({
selector: 'header',
templateUrl: `
<section class="container">
<button (click)="clickFilter()">Open filter</button>
</section>
`
})
export class HeaderComponent {
constructor(private _messageService: MessageService){}
clickFilter():void {
this._messageService.filter('Register click');
}
}ClassB:
@Component({
selector: 'store',
template: `<article class="card">
Test
</article>`
})
export class StoreComponent {
constructor(private _messageService: MessageService){
this._messageService.listen().subscribe((m:any) => {
console.log(m);
this.onFilterClick(m);
})
}
onFilterClick(event) {
console.log('Fire onFilterClick: ', event);
}
}发布于 2018-11-12 07:49:21
问题
你的实现看起来很好。唯一的问题是在哪里提供MessageService。您在两个不同的MessageService Modules of HeaderComponent和StoreComponent中声明了HeaderComponent。由于它创建了两个独立的MessageService实例,因此它们无法通信。
修复
您应该在模块中提供MessageService,这是HeaderComponent和StoreComponent所共有的。
如果您不确定公共模块,那么您可以通过提供AppModule来测试它。
app.module.ts
providers: [
MessageService
]注意:不要忘记将MessageService从其他Modules的providers中删除。
发布于 2018-11-12 07:59:32
MessageService必须添加到ClassA和ClassB的父模块中。比你的代码更有效。
https://stackoverflow.com/questions/53257661
复制相似问题