javascript - Angular 2 ng-bootstrap Modal: Hur man skickar data till entry-komponent

Jag försöker skicka data till en anpassad modal-innehållskomponent så att jag kan kalla på den från vilken annan komponent som helst och inte upprepa kod. Jag är ny på Angular 2 och har följt demonstrationerna "Komponenter som innehåll" i ng-bootstrap samt "Komponentinteraktion" i Angulars dokumentation och har inte hittat ett sätt att få detta att fungera eller ett exempel för detta fall.

Jag kan få modalen att öppnas, men inte med dynamiskt innehåll. Jag har försökt med @Input och variabelmetoden utan framgång. Jag har också lagt till ModalService i providers i app.module.ts. Detta är vad jag har med båda metoderna som inte fungerar:

page.component.html:

<a (click)="modal('message')">
<template ngbModalContainer><my-modal [data]="data"></my-modal></template>

page.component.ts:

import { Component } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { ModalService } from '../helpers/modal.service'
import { ModalComponent } from '../helpers/modal.component'

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss'],
  entryComponents: [ ModalComponent ]
})

export class PageComponent {
  data = 'customData'
  constructor (
    private ngbModalService: NgbModal,
    private modalService: ModalService
   ) { }

  closeResult: string
  modal(content) {
    this.data = 'changedData'
    this.modalService.newModal(content)
    this.ngbModalService.open(ModalComponent).result.then((result) => {
      this.closeResult = `Closed with: ${result}`
    }, (reason) => {
      this.closeResult = `Dismissed ${reason}`
    });
  }
}

modal.service.ts:

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

@Injectable()
export class ModalService {
  private modalSource = new Subject<string>()
  modal$ = this.modalSource.asObservable()
  newModal(content: string) {
    this.modalSource.next(content)
  }
}

modal.component.ts:

import { Component, Input, OnDestroy } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';
import { ModalService } from './modal.service'

@Component({
  selector: 'my-modal',
  template: `
    <div class="modal-body">
    {{data}}
    {{content}}
    </div>
  `
})

export class ModalComponent implements OnDestroy {
  @Input() data: string
  content = 'hello'

  subscription: Subscription
  constructor(
    private modalService: ModalService
  ) {
    this.subscription = modalService.modal$.subscribe(
      content => {
        this.content = content
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Använder angular v2.1.0, angular-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8

Svar #1

Jag löste det! Här är hur man gör:

  • I komponenten (där du öppnar modalen) gör så här:

    const modalRef = this.modalService.open(ModalComponent);

modalRef.componentInstance.passedData= this.dataToPass;

modalRef.result.then(result => {
  //do something with result
}

  • I den modala komponenten (mottagande änden):

    export class ModalComponent { 

 passedData: typeOfData;     // declare it!

 someFunction() {     // or some  lifecycle hook 
  console.log(this.passedData)  // and then, use it!
 }

// rest of the ModalComponent 
}

Svar #2

Bara tillhandahåll en tjänst och injicera den i VideoModalComponent och PageComponent så kan du använda denna tjänst för att kommunicera.

Se https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service för mer detaljer och exempel.

Relaterade artiklar