Angular 2 ng-bootstrap Modal:如何将数据传递给入口组件
Angular 2 ng-bootstrap Modal: How to pass data to entry component
我正在尝试将数据发送到自定义模态内容组件,以便我可以从任何其他组件调用它而不是重复代码。我是 Angular 2 的新手,已经关注了 ng-boostrap 的 "Components as content" 演示以及 Angular 文档中的 "Component Interaction",但还没有找到获取方法这可以工作或作为这种情况的示例。
我可以打开模式,但不能打开动态内容。我试过 @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
只要提供一个服务,注入VideoModalComponent
和PageComponent
,就可以使用这个服务进行通信了。
有关更多详细信息和示例,请参阅 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service。
这里有一些方法。
- 公开一个
component
的实例
- 在
NgbActiveModal
的实例上使用解析并公开已解析的值
- 使用解析并将解析值绑定到组件的输入。
参见:https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089
我解决了!操作方法如下:
在组件中(从您打开模式的地方)执行此操作:
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
}
我正在尝试将数据发送到自定义模态内容组件,以便我可以从任何其他组件调用它而不是重复代码。我是 Angular 2 的新手,已经关注了 ng-boostrap 的 "Components as content" 演示以及 Angular 文档中的 "Component Interaction",但还没有找到获取方法这可以工作或作为这种情况的示例。
我可以打开模式,但不能打开动态内容。我试过 @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
只要提供一个服务,注入VideoModalComponent
和PageComponent
,就可以使用这个服务进行通信了。
有关更多详细信息和示例,请参阅 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service。
这里有一些方法。
- 公开一个
component
的实例
- 在
NgbActiveModal
的实例上使用解析并公开已解析的值
- 使用解析并将解析值绑定到组件的输入。
参见:https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089
我解决了!操作方法如下:
在组件中(从您打开模式的地方)执行此操作:
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 }