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

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

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

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

---

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

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

服务

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 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 always的订阅。Ngondestory是实现这一点的好地方。

//首先创建@Injectable服务和所有comman功能，如下所示
//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();
  }
 }

从“@angular/core”导入{Injectable}”；
@可注射（）
导出类Appshare{
分享：'测试'
构造函数（）{
console.log（'search'）；
}
onSearch（）{
console.log（'search'）；
}
onBtnClick（）{
console.log（'btnclick'）；
}
}
//然后在组件部分声明它，并在两个组件中直接使用
从'@angular/core'导入{Component}；
从“/Appshare.service”导入{Appshare}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
构造函数（公共appshare:appshare）{
this.appshare.onSearch（）；
this.appshare.onBtnClick（）；
}
}
@组成部分({
选择器：“appTwo”，
模板：“AppComponent2”
})
导出类AppComponent2{
构造函数（公共appshare:appshare）{
this.appshare.onSearch（）；
this.appshare.onBtnClick（）；
}
}

您的意思是在同一页面中使用两个自定义组件吗？或者您的意思是在同一ts文件中定义了两个组件？这两种方式都无关紧要。你需要将你的服务注入到任何你想使用它的组件中inIt不重要，即使它们在同一个页面中，它们是两个不同的组件，你应该将你的服务注入这两个组件中，您还可以创建一个父类，从父类扩展这个2类，并在父类中注入服务。@fatemefazli您可以给出任何示例链接，从那里我可以了解有关父类的更多信息并从父类扩展类。@SurajRao。。我试图注入服务，但它不起作用。你能给我一个基于我的示例代码的示例吗？@user334030 typescript将帮助你。它应该是

\u subjectSource$

而不是

totalCostSource$

当从服务调用到组件时，onBtnClick不是一个函数。

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

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