Question

我的应用程序中有这个Angular6组件Arquitecture 主要成分

<app-navbar></app-navbar>
<app-dashboard></app-dashboard>

仪表板组件

<app-meseros>
</app-meseros>
<app-ultimospedidos></app-ultimospedidos>
<app-modal></app-modal>

我想从navbar.component调用模式，我的模式在组件modal.component的仪表板上

这就是我尝试过的

<!--navbar.component.html -->
<a class="nav-link btn btn-primary" (click)="openModal()">Crear pedido</a> 

<!--navbar.component.ts -->
import { Component, OnInit } from '@angular/core';
import { BootstrapService } from '../../services/bootstrap.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  constructor(public bootstrapService: BootstrapService) {}
  ngOnInit() {}
  openModal() {
    this.bootstrapService.toggle();
  }
}

我创建了一个服务，以便可以在navbar.component和modal.component之间进行通信，这是我的服务

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

@Injectable({
  providedIn: 'root'
})
export class BootstrapService {
  isOpen: any = false;
  constructor() {}
  toggle() {
    console.log(!this.isOpen);
    return (this.isOpen = !this.isOpen);
  }
}

然后在modal.component.ts中，我想订阅这些更改，以便我可以在布尔值更改时启动模式。

import { Component, OnInit } from '@angular/core';
import { BootstrapService } from '../../services/bootstrap.service';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  isOpen;
  closeResult: string;
  modalname: string;
  constructor(
    public modalService: NgbModal,
    public bootstrapService: BootstrapService
  ) {}
  open(content) {
    // console.log(this.bootstrapService.popup);
    this.modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
  ngOnInit() {
    this.bootstrapService.toggle().subscribe(isOpen => {
      this.isOpen = isOpen;
      console.log(isOpen);
    });
  }
}

我什至无法从bootstrapService订阅更改，但出现以下错误， src / app / components / modal / modal.component.ts（41,36）中的RROR：错误TS2339：类型“ boolean”上不存在属性“ subscribe”。

如果我尝试订阅这样的服务价值

this.bootstrapService.isOpen.subscribe(isOpen => {
  this.isOpen = isOpen;
  console.log(isOpen);
});

我从浏览器的控制台上看到错误

DashboardComponent.html：1错误TypeError：this.bootstrapService.isOpen.subscribe不是函数

我希望有人可以对此方法有所了解，如果这是进行这种实现的最佳方法，请先感谢！

Answer 1

解决了这个问题，我从错误的库中调用了错误的EventEmitter，这是更新的工作代码

首先，我从要调用模态的组件中调用服务

import { Component, OnInit } from '@angular/core';
import { BootstrapService } from '../../services/bootstrap.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  constructor(public bootstrapService: BootstrapService) {}
  ngOnInit() {}
  openModal() {
    this.bootstrapService.toggle();
  }
}

然后我发出更改，以便我可以从模式组件进行订阅

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BootstrapService {
  isOpen: any = 'isOpen';
  @Output() change: any = new EventEmitter();
  constructor() {}
  toggle() {
    this.change.emit(this.isOpen);
    console.log(this.isOpen);
  }
}

i reference my template with `@ViewChild('crearpedido') modalInstance;`
and finally subscribe to changes, call modal on subscribe changes.

import { Component, OnInit, ViewChild } from '@angular/core';
import { BootstrapService } from '../../services/bootstrap.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  isOpen;
  closeResult: string;
  @ViewChild('crearpedido') modalInstance;
  constructor(
    public modalService: NgbModal,
    public bootstrapService: BootstrapService
  ) {}
  ngOnInit() {
    this.bootstrapService.change.subscribe(isOpen => {
      this.isOpen = isOpen;
      console.log(this.isOpen);
      this.modalService.open(this.modalInstance);
    });
  }
}

这里是工作仓库！！ https://github.com/soyisraelortiz/componentscommunication

从一个同级组件到另一个角度调用模态

1 个答案: