Angular 4从另一个组件执行功能

Question

我正在使用 Angular4 构建一个 web 应用程序，并且我正在尝试创建一个按钮来调用其他组件上的函数。

我在这里阅读了其他类似的问题，但他们有这样一种情况，即组件是子组件或兄弟组件，并在 html 上声明，例如：

<parent-component>
    <child-component></child-component>
    <sibling-component></sibling-component>
</parent-component>

但是，我正在处理不同的场景，因为我的组件是通过 routing 调用的，我无法使其工作。

基本上我在页面上有一个header，其中包含一些执行功能的控件，但是这些功能需要触发/更改通过路由加载的其他组件上的数据。

例如，我有路由/store 来显示商店列表，我在此页面上还有一个抽屉，我想在用户单击标题上的按钮时显示它，这就是问题所在，因为我无法将事件从HeaderComponent 传播到StoreComponent。

这些是我的文件：

header.component.ts

@Component({
    selector: 'header',
    templateUrl: `
        <section class="container">
            <button (click)="clickFilter()">Open filter</button>
        </section>
    `
})

export class HeaderComponent {
    @Output() onFilter: EventEmitter = new EventEmitter();

    clickFilter():void {
        this.onFilter.emit('Register click');
    }
}

store.component.ts

@Component({
    templateUrl: 'store.html'
})

export class StoreComponent {
    onFilterClick(event) {
        console.log('Fire onFilterClick: ', event);
    }
}

// store.html
<article class="card" (onFilter)="onFilterClick($event)">
    Test
</article>

但这不起作用。

另外，我实际上不需要调用函数，我可以只传递一个布尔值，例如，绑定到 StoreComponent 上的属性，然后切换 html 文件中的 div。

Answer 1

我没有时间测试它，但类似的解决方案对我有用。为您的需要创建的代码。

创建这样的服务

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);
    }

}

然后像这样在你的标题组件中实现

// header.component.ts
@Component({
    selector: 'header',
    templateUrl: `
        <section class="container">
            <button (click)="clickFilter()">Open filter</button>
        </section>
    `
 })

export class HeaderComponent {
     @Output() onFilter: EventEmitter = new EventEmitter();

     constructor(private _messageService: MessageService){}
     clickFilter():void {
         // this.onFilter.emit('Register click');
         this._messageService.filter('Register click');
     }
 }

然后像这样在您的商店组件中使用

@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);
    }
 }

这个概念是你可以在服务中使用 observable 并订阅你想要的组件（store.component），并且可以像我在 header.component 中所做的那样从应用程序的任何地方发送事件

希望对你有帮助

Answer 2

我有类似的情况，但不想为此提供服务。我设法像回调一样传递它。应该是这样的：

header.component.ts

@Component({
selector: 'header',
templateUrl: `
    <section class="container">
        <button (click)="myFunction()">Open filter</button>
    </section>
`})
export class HeaderComponent {
   @Input() myFunction: Function;
}

然后只是调用它传递函数和参数

// store.html
<header [myFunction]="functionOnStore"></header>

并且只是在 store 组件上正常声明 functionOnStore