首页 文章

两个单独的组件角度2之间的通信

提问于
浏览 次
0

在角度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);
  }
 }
}

SignUpComponent：

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

SignUp Html：

<div style="background-color: #4cae4c; width: 1000px" class="ui-rtl" 
dir="rtl">
<p-dialog [(visible)]="display" width="200px"  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库进行模态并且它使用了特殊标记 . 在 Headers 组件中，我有一个按钮（注册），注册组件和模板和服务在一个单独的文件夹中 . 我想当用户点击该按钮时会打开一个模态框 . Headers 组件：

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

最后这是 Headers html：

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

问题：当我点击 Headers 中的注册按钮时，模态框没有't open. There is no error but when I put break point in sources it doesn' t转到signup.component.ts . 问题是什么？我该如何解决？感谢您以简单的方式提供帮助 . 还有这两个类似于我的代码的链接 . Parent and children communicate via a service和Example of Component Communication in Angular 2/4

angular components directive

2 回答

  • 0

    试试偶数 Launcher

    首先添加要传递的数据：

    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));
    回复于
  • 1

    试试这个 ：

    公开 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;
      }
    });
  //...
    回复于

相关问题