Question

嗨，我是Angular的新手，我试图从另一个组件调用一个组件函数，我在阅读其他类似的问题，但它们的场景是这些组件是 child 或 sibling 带有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);
    }
 }

Answer 1

问题

您的实现看起来不错。唯一的问题是提供MessageService的位置。您在MessageService和Modules的两个不同的HeaderComponent中声明了StoreComponent。因此，它无法创建两个MessageService的单独实例，因此它们无法通信。

修复

您应该在MessageService和HeaderComponent通用的模块中提供StoreComponent。

如果不确定通用模块，则可以通过在AppModule中提供来进行测试。

app.module.ts

providers: [
    MessageService
]

注意：不要忘记从其他MessageService的{{1}}中删除providers。

Answer 2

MessageService必须添加到ClassA和ClassB的父模块中。比您的代码能正常工作。

如何从另一组件调用一个组件功能

MessageService：

ClassA：

ClassB：

2 个答案:

问题

修复