我正在尝试将数据发送到自定义模态内容组件,以便我可以从任何其他组件调用它,而不是重复代码.我是Angular 2的新手,并且已经遵循ng-boostrap的"组件内容"演示以及Angular文档中的"组件交互",并且没有找到一种方法来实现这一点,或者是这个案例的一个例子.
我可以打开模态,但不能使用动态内容.我尝试了@Input变量方法并没有成功.我也加入ModalService了提供商app.module.ts.这就是我对两种方法都不起作用的方法:
page.component.html:
<a (click)="modal('message')">
<template ngbModalContainer><my-modal [data]="data"></my-modal></template>
Run Code Online (Sandbox Code Playgroud)
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) => …Run Code Online (Sandbox Code Playgroud)