Angular 2 ng-bootstrap Modal:如何将数据传递给入口组件

新手上路,请多包涵

我正在尝试将数据发送到自定义模态内容组件,以便我可以从任何其他组件调用它而不是重复代码。我是 Angular 2 的新手,并且遵循了 ng-boostrap 的“组件作为内容”演示以及 Angular 文档中的“组件交互”,但还没有找到使它工作的方法或这种情况的示例.

我可以打开模式,但不能打开动态内容。我试过 @Input 和变量方法,但没有成功。我还向 ModalService 中的提供商添加了 app.module.ts 。这是我对两种不起作用的方法所拥有的:

页面.component.html:

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

页面.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}`
    });
  }
}

模态.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)
  }
}

模态.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

原文由 asabido 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 663
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
  }

原文由 BlackBeard 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题