首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何从另一个组件调用一个组件函数

如何从另一个组件调用一个组件函数
EN

Stack Overflow用户
提问于 2018-11-12 07:37:48
回答 2查看 959关注 0票数 0

嗨,我是角的新手,我试着从另一个组件调用一个组件函数,我正在阅读其他类似的问题,但是它们有一个场景,其中组件是兄弟级的组件,声明在html上,但是我的场景是不同的,我使用了下面的代码,但是它不能工作(方法不调用)

MessageService:

代码语言:javascript
复制
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:

代码语言:javascript
复制
@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:

代码语言:javascript
复制
@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);
    }
 }
EN

回答 2

Stack Overflow用户

发布于 2018-11-12 07:49:21

问题

你的实现看起来很好。唯一的问题是在哪里提供MessageService。您在两个不同的MessageService Modules of HeaderComponentStoreComponent中声明了HeaderComponent。由于它创建了两个独立的MessageService实例,因此它们无法通信。

修复

您应该在模块中提供MessageService,这是HeaderComponentStoreComponent所共有的。

如果您不确定公共模块,那么您可以通过提供AppModule来测试它。

app.module.ts

代码语言:javascript
复制
providers: [
    MessageService
]

注意:不要忘记将MessageService从其他Modulesproviders中删除。

票数 1
EN

Stack Overflow用户

发布于 2018-11-12 07:59:32

MessageService必须添加到ClassA和ClassB的父模块中。比你的代码更有效。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53257661

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档