两个独立组件之间的通信 angular 2

Posted 2023-02-23

【中文标题】两个独立组件之间的通信 angular 2

【英文标题】：communication between two separate component angular 2

【发布时间】：2018-02-08 01:42:05

【问题描述】：

在角度 2 中，我想通过服务在两个单独的组件之间进行通信，但它们不是子组件和父组件。 服务组件：

import  Injectable, Inject  from '@angular/core';
import  Subject  from 'rxjs/Subject';
@Injectable()
export class SignUpService 
private openDialog = new Subject<any>();
openDialogObservable$ = this.openDialog.asObservable();
constructor()
public open(data: any) 
if (data) 
  this.openDialog.next(data);
  
 

注册组件：

import  Component, OnInit, Input, ViewChild  from '@angular/core';
import SignUpService from "../services/signup-service.service";
import  Subscription  from 'rxjs';
@Component(
selector: 'signup',
templateUrl: './signup.html',
)
export class SignUpComponent implements OnInit 
private SignUpSubscription: Subscription;
display:boolean = false;
constructor(private signUpService: SignUpService) 

ngOnInit() 
this.SignUpSubscription = 
this.signUpService.openDialogObservable$.subscribe((res) => 
  if (res == 'show') 
    this.display = true;
  
);

showDialog() 
this.display = true;

hideDialog() 
this.display = false;

注册 Html：

<div style="background-color: #4cae4c; width: 1000px" class="ui-rtl" 
dir="rtl">
<p-dialog [(visible)]="display"   modal="true" 
[responsive]="true" tabindex="-1" role="dialog" aria-
labelledby="mySmallModalLabel" aria-hidden="true" >
<p-header class="text-center">
  SignUp
</p-header>
<form (ngSubmit)="onSubmit($event)" #signUpForm="ngForm">

  <div class="group signup form-group" style="width:300px">
    <input #firstName="ngModel" class="form-control" 
  [(ngModel)]="createuser.firstName" name="firstname" type="text" pattern="[\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF][\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF]+" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
    </div>
 </form>
</p-dialog>

关于这个html应该说我用primeng库制作了它，它使用了特殊的标签。 在标题组件中，我有一个按钮（注册），注册组件和模板和服务位于一个单独的文件夹中。我希望当用户单击该按钮时会打开一个模式框。 标头组件：

import Component, OnInit, EventEmitter, Output, Input, ViewChild from '@angular/core';
import SignUpService from "../services/signup-service.service";
import Subscription from 'rxjs';
@Component(
selector: 'header-component',
templateUrl: './header.component.html',
)
export class HeaderComponent 
private subscription: Subscription;
constructor(private signUpService: SignUpService
) 

showDialog() 
this.signUpService.open('show');

最后这是标题 html：

<a type="button" (click)="showDialog()" >Sign Up</a>

问题：当我单击标题中的注册按钮时，模式框没有打开。 没有错误，但是当我在源中放置断点时，它不会转到 signup.component.ts。问题是什么？我该如何解决？ 感谢您以简单的方式提供帮助。 还有这两个链接类似于我的代码。 Parent and children communicate via a service 和 Example of Component Communication in Angular 2/4

【参考方案1】：

试试偶数发射器

首先添加你要传递的数据：

public pdfdisplayAdded$: EventEmitter<PdfDisplay>;

    constructor(private http: Http) 
        this.pdfdisplayAdded$ = new EventEmitter();
    

    setPdfData(retval: any) 
        this.pdfdisplay = retval;
        this.pdfdisplayAdded$.emit(this.pdfdisplay);
        return this.pdfdisplay;
    

然后订阅您想要获取该数据的事件

 this.pdfDisplayService.pdfdisplayAdded$.subscribe((data: any) => this.setPdfStatus(data));

【参考方案2】：

试试这个：

将openDialog公开：

export class SignUpService 
  public openDialog = new Subject<any>();
  //...

并订阅openDialog：

export class SignUpComponent implements OnInit 
  //...
  constructor(private signUpService: SignUpService) 
  
  ngOnInit() 
    this.SignUpSubscription = 
    this.signUpService.openDialog.subscribe((res) => 
      if (res == 'show') 
         this.display = true;
      
    );
  //...