Góc 2 ng-bootstrap Phương thức: Cách chuyển dữ liệu vào thành phần nhập

Question

Tôi đang cố gắng gửi dữ liệu đến thành phần nội dung phương thức tùy chỉnh để tôi có thể gọi nó từ bất kỳ thành phần nào khác và không lặp lại mã. Tôi mới sử dụng Angular 2 và đã theo dõi bản demo "Components as content" của ng-boostrap cũng như "Component Interaction" trong tài liệu Angular và không tìm được cách để làm việc này hoặc ví dụ cho trường hợp này .

Tôi có thể mở phương thức, nhưng không phải với nội dung động. Tôi đã thử các @Input và cách tiếp cận biến không thành công. Tôi cũng đã thêm ModalService cho các nhà cung cấp trong app.module.ts. Đây là những gì tôi có với cả hai phương pháp đó không làm việc:

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

Sử dụng v2.1.0 góc, góc-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8

Answer 1

Chỉ cần cung cấp một dịch vụ và tiêm nó vào VideoModalComponent và PageComponent sau đó bạn có thể sử dụng dịch vụ này để giao tiếp.

Xem https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service để biết thêm chi tiết và ví dụ.

Answer 2

Dưới đây là một số cách để thực hiện.

1. Expose một thể hiện của một component
2. Sử dụng quyết tâm và tiếp xúc với các giá trị được giải quyết trên một thể hiện của NgbActiveModal
3. Sử dụng quyết tâm và ràng buộc giá trị quyết tâm đầu vào thành phần của.

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