Angular 2 ng-bootstrap Modal: Como passar dados para o componente de entrada

asabido

Estou tentando enviar dados para um componente de conteúdo modal personalizado para que possa chamá-lo de qualquer outro componente e não repetir o código. Eu sou novo no Angular 2 e segui a demonstração "Componentes como conteúdo" do ng-boostrap, bem como a "Interação de componentes" nos documentos do Angular e não encontrei uma maneira de fazer isso funcionar ou um exemplo para este caso .

Consigo abrir o modal, mas não com conteúdo dinâmico. Tentei a @Inputabordagem e a variável sem sucesso. Eu também adicionei ModalServiceaos provedores em app.module.ts. Isso é o que eu tenho com as duas abordagens que não funcionam:

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();
  }
}

Usando angular v2.1.0, angular-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8

Günter Zöchbauer

Basta fornecer um serviço e injetá-lo VideoModalComponente, em PageComponentseguida, você pode usar esse serviço para se comunicar.

Consulte https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service para obter mais detalhes e exemplos.

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como passar o componente modal de dados para o componente pai usando o ng-bootstrap no angular 4

como passar dados para modal Angular ng-bootstrap para ligação

Como passar o valor de entrada do componente pai para o filho sem usar ng no angular?

Como passar dados do modal para o componente angular de chamada?

Como passar dados para a entrada no componente html angular usando vinculação de propriedade

Como passar dados para o componente de atributo Angular 2 aninhado (filho)

Como passar dados do componente para o modal ngBootstrap no Angular 7?

Manipule dados de contexto para passar a entrada para o componente

Como passar dados para o componente angular usando o componente de diálogo nebular?

Angular 2 - como passar dados para um componente filho sem renderizar o componente filho duas vezes?

Como passar dados de campo de entrada do modal para o contêiner no react-Native?

como passar dados de um componente para outro componente no angular 2?

Como passar dados da lista AngularJS para o modal Bootstrap?

Como passar dados para o modal ng2-bs3?

Como POSTAR dados da exibição de dados de entrada e resultado para o componente no Angular?

Como passar dados do componente filho para o pai [Angular]

Como passar dados do componente angular filho para o pai

Como passar let-c = "close" do template modal para o angular 5 de outro componente

Como passar let-c = "close" do template modal para o angular 5 de outro componente

Angular 2 - Incapaz de passar dados para o componente raiz usando ng-content e binding. Objetivo: componente de formulário reutilizável

Como passar dados assíncronos como uma matriz de objetos para o componente filho - angular 6

Como passar os dados de uma linha selecionada para o modal de bootstrap

Passar parâmetro de rota para componente filho como entrada em Angular 2

Como passar dados para o controlador usando modal ui angular?

Modal Ngx-bootstrap: como passar dados para o modal component.ts em vez de para o modelo html?

Como passar dados de serviço de um componente para outro no Angular 5

como passar uma resposta de serviço de componente para outro componente no angular 2

NativeScript Como passar dados de serviço para componente?

Como passar dados de mapStateToProps para o componente pai?

TOP lista

quentelabel

Arquivo