在同一页面Angular中的两个组件之间共享方法答案

【问题标题】：Share methods between two components in same page Angular在同一页面Angular中的两个组件之间共享方法
【发布时间】：2018-11-06 15:39:10
【问题描述】：

我在同一页面中有两个组件。对于两个组件，我几乎没有相同的方法和属性。如何通过使用服务来使用它。下面是一个示例代码...

@Component({
selector: 'app',
template: '<h1>AppComponent1</h1>'
})
export class AppComponent1 { }

@Component({
selector: 'appTwo',
template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 { }

我有以下两种通用的方法：

onSearch(){
 console.log('search');
}

onBtnClick(){
//do something
}

如何使用服务在同一页面上的这两个组件之间共享。

【问题讨论】：

你的意思是你在同一个页面中使用了两个自定义组件？或者你的意思是你在同一个 ts 文件中定义了 2 个组件？无论哪种方式都无所谓。您需要将您的服务注入您想要在其中使用它的任何组件中
即使它们在同一个页面也没关系，它们是 2 个不同的组件，你应该在两者中注入你的服务，你也可以创建一个父类并从父类扩展这 2 个类并注入服务在父级中。
@fatemefazli 你能提供任何示例链接，我可以在哪里了解更多关于父级的信息并从父级扩展类..
@SurajRao ..我尝试注入服务，但它不起作用..你能根据我的示例代码给我一个例子吗..
@user3340300 typescript docs 会帮助你。

标签： javascript angular typescript

【解决方案1】：

您可以使用双向服务。即使您的组件位于不同的模块中也很有用。

服务

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class AppShareService {
  private readonly subjectSource$ = new Subject<object>();

  public get newData(): Observable<object> {
    return this.subjectSource$.asObservable();
  }

  public publish(data: any) {
    this.subjectSource$.next(data);
  }
}

您可以像这样发布类似事件的消息：

export class AppComponent {
  constructor(public appShareService: AppShareService ) {
    appShareService.publish({data: 'some data'});
  }
}

您可以订阅这些事件：

export class HomeComponent implements OnDestroy {
  mySubscription: Subscription;

  constructor(public appShareService: AppShareService ) {
    this.mySubscription = appShareService.newData.subscribe((data) => {
      console.log(data); // {data: 'some data'}
    });
  }

ngOnDestroy(): void {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
 }
}

良好的做法是始终取消订阅 Observable。 ngOnDestroy 是一个很好的地方。

【讨论】：

应该是_subjectSource$ 而不是totalCostSource$

【解决方案2】：

//first make @Injectable service and all your comman functionality like below

import {Injectable} from "@angular/core";


@Injectable()
export class Appshare {
  share:'test'
    constructor( ) { 
     console.log('search');
    }
    onSearch(){
    console.log('search');
    }

    onBtnClick(){
    console.log('btnclick');
    }

}

//than declare it in your component section use direct in your both component

import { Component } from '@angular/core';
import{Appshare} from "./appshare.service";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(public appshare:Appshare){
      this.appshare.onSearch();
      this.appshare.onBtnClick();
  }

}


@Component({
selector: 'appTwo',
template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 {
  constructor(public appshare:Appshare){
      this.appshare.onSearch();
      this.appshare.onBtnClick();
  }
 }

【讨论】：

在从服务调用到组件时，由于 onBtnClick 不是函数，因此出现以下错误消息。