Angular 2 ng-bootstrap Модально: как передать данные в компонент ввода

Question

Я пытаюсь отправить данные в пользовательский компонент модального контента, чтобы я мог вызывать его из любого другого компонента, а не повторять код. Я новичок в Angular 2 и следил за демо-версией ng-boostrap «Компоненты как контент», а также «Компонентное взаимодействие» в Angular docs и не нашел способа заставить это работать или пример для этого случая ,

Я могу получить модальный, чтобы открыть, но не с динамическим контентом. Я пробовал @Input и переменный подход без успеха. Я также добавил ModalService поставщикам в app.module.ts. Это то, что я с обоими подходами, что не работает:

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

Использование углового V2.1.0, угловой-кли v1.0.0-beta.16, нг-самозагрузки v1.0.0-alpha.8

Answer 1

Просто предоставлять услуги и ввести его в VideoModalComponent и PageComponent, то вы можете использовать этот сервис для общения.

См. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service для получения более подробной информации и примеров.

Answer 2

Вот несколько способов сделать это.

1. Разоблачите экземпляр component
2. использование решимости и подвергать разрешенные значения на примере NgbActiveModal
3. использование решимости и связать разрешенные значения к входам компоненты.

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