Angular 4从另一个组件执行功能 [英] Angular 4 execute function from another component

问题描述

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

I'm build a webapp using Angular4 and I'm trying to create a button to call functions on other components.

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

I was reading other similar questions here, but they have a scenario where the components are child or sibling components with the declaration on the html, e.g.:

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

但是，我正在另一种情况下工作，因为我的组件是通过routing调用的，所以我无法使其工作.

However, I'm working on a different scenario, because my components are Invoked via routing and I can't make it work.

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

Basically I have a header on the page with some controls to execute functions, but these functions need to trigger/change data on other components loaded via the routing.

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

For example, I have the routing /store to show a list of stores, I also have a drawer on this page that I want to show when the user clicks on a button on the header, this is the problem, because I can't propagate the event from the HeaderComponent to the 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.

Also, I don't actually need to call a function, I could just pass a boolean value, for example, to bind to a property on the StoreComponent and then toggle the div inside the html file.

推荐答案

我没有时间对其进行测试，但是类似的解决方案对我有用.为您创建的代码.

I didn't get time to test it but similar solution worked for me. the code created for your need.

创建这样的服务

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

}

然后像这样在您的标头组件中实现

then implement in your header component like this

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

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

then use in your store component like this

@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中所做的那样从应用程序中的任何位置发送事件

The concept is that you can use observable in a service and subscribe in the component where you want it (store.component) and can send event from anywhere in the app like i did in the header.component

我希望它将对您有帮助

这篇关于Angular 4从另一个组件执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！