Angular 2 ng-bootstrap模式:如何将数据传递到入口组件 [英] Angular 2 ng-bootstrap Modal: How to pass data to entry component
问题描述
我正在尝试将数据发送到自定义模式内容组件,因此我可以从任何其他组件中调用它,而无需重复代码.我是Angular 2的新手,并且已经按照ng-boostrap的作为内容的组件"演示以及Angular文档中的组件交互"进行了演示,但是还没有找到一种使之有效的方法或本例的示例
I'm trying to send data to a custom modal content component so I can call it from any other component and not repeat code. I'm new to Angular 2 and have followed the "Components as content" demo of ng-boostrap as well as the "Component Interaction" in the Angular docs and have not found a way to get this to work or an example for this case.
我可以打开模式,但不能包含动态内容.我尝试了@Input
和可变方法,但没有成功.我还已将ModalService
添加到app.module.ts
中的提供程序.这是我无法使用的两种方法的结果:
I can get the modal to open, but not with dynamic content. I've tried the @Input
and the variable approach with no success. I've also added ModalService
to the providers in app.module.ts
. This is what I have with both approaches that doesn't work:
page.component.html:
page.component.html:
<a (click)="modal('message')">
<template ngbModalContainer><my-modal [data]="data"></my-modal></template>
page.component.ts:
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:
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:
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
Using angular v2.1.0, angular-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8
推荐答案
只需提供一项服务并将其注入到VideoModalComponent
和PageComponent
中,您就可以使用此服务进行通信.
Just provide a service and inject it to VideoModalComponent
and PageComponent
then you can use this service to communicate.
请参见 https://angular.io /docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service 了解更多详细信息和示例.
See https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service for more details and examples.
这篇关于Angular 2 ng-bootstrap模式:如何将数据传递到入口组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!