小编asa*_*ido的帖子

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

我正在尝试将数据发送到自定义模态内容组件,以便我可以从任何其他组件调用它,而不是重复代码.我是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)

javascript typescript ng-bootstrap angular

11
推荐指数
2
解决办法
2万
查看次数

标签 统计

angular ×1

javascript ×1

ng-bootstrap ×1

typescript ×1