Angular 2 ng-bootstrap Modal: Jak przekazywać dane do komponentu wejściowego

Question

Próbuję wysłać dane do niestandardowego komponentu treści modalnej, aby można było wywoływać go z dowolnego innego składnika, a nie powtarzać kodu. Jestem nowy w Angular 2 i śledziłem demo "Components as content" ng-boostrap, jak również "Interakcje z komponentami" w Angularnych dokumentach i nie znalazłem sposobu, aby to zadziałało lub przykład dla tego przypadku .

Mogę uzyskać modalny do otwierania, ale nie z dynamiczną treścią. Próbowałem podejście @Input i zmienne bez powodzenia. Dodałem także ModalService do dostawców w app.module.ts. To co mam z obu metod, które nie działa:

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

Korzystanie kątową V2.1.0, kątowe CLI-v1.0.0-beta.16, NG-bootstrap v1.0.0-alpha.8

Answer 1

Wystarczy dostarczyć usługę i wstrzyknąć go do VideoModalComponent i PageComponent następnie można użyć ta usługa do komunikacji.

Aby uzyskać więcej informacji i przykładów, zobacz artykuł https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service.

Answer 2

Oto kilka sposobów, aby to zrobić.

1. Expose instancję component
2. Korzystanie determinacji i narazić rozwiązane wartości na wystąpienie NgbActiveModal
3. Korzystanie determinacji i wiążą rozwiązane wartości wejść składnika.

Patrz: https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089