web-dev-qa-db-ja.com

Angular 2 ng-bootstrap Modal:エントリコンポーネントにデータを渡す方法

カスタムモーダルコンテンツコンポーネントにデータを送信しようとしているので、コードを繰り返さずに他のコンポーネントから呼び出すことができます。私はAngular 2を初めて使い、ng-boostrapの「コンテンツとしてのコンポーネント」デモと、Angular docsとこれを動作させる方法またはこの場合の例を見つけていません。

モーダルを開くことはできますが、動的コンテンツではできません。 @Inputと変数アプローチを試しましたが、成功しませんでした。また、app.module.tsのプロバイダーにModalServiceを追加しました。これは私が両方のアプローチで持っているもので、うまくいきません:

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

angular v2.1.0、angular-cli v1.0.0-beta.16、ng-bootstrap v1.0.0-alpha.8を使用

10
asabido

サービスを提供し、それをVideoModalComponentおよびPageComponentに注入するだけで、このサービスを使用して通信できます。

詳細と例については、 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service をご覧ください。

2

解決しました!方法は次のとおりです。

  • コンポーネント(モーダルを開いている場所)でこれを行います:

    const modalRef = this.modalService.open(ModalComponent);
    
    modalRef.componentInstance.passedData= this.dataToPass;
    
    modalRef.result.then(result => {
      //do something with result
    }                                                       
    
  • モーダルコンポーネント(受信側):

    export class ModalComponent { 
    
     passedData: typeOfData;     // declare it!
    
     someFunction() {     // or some  lifecycle hook 
      console.log(this.passedData)  // and then, use it!
     }
    
    // rest of the ModalComponent 
    }
    
9
BlackBeard

いくつかの方法があります。

  1. componentのインスタンスを公開します
  2. Resolveを使用し、NgbActiveModalのインスタンスで解決された値を公開します
  3. 解決を使用し、解決された値をコンポーネントの入力にバインドします。

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

0
Joel Raju