Как передать параметры модальным?

Question

Вот так я использую NG2-самозагрузку модальность:

import {Component} from '@angular/core'; 
import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'add-customer-modal', 
    template: ` 
    <template #test let-c="close" let-d="dismiss"> 
     <div class="modal-header"> 
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> 
     </div> 
    </template> 
    <button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button> 
    ` 
}) 
export class AddCustomerModal { 

    constructor(private modalService: NgbModal) {} 

    open(content) { 
    this.modalService.open(content, { size: 'lg' }).result.then((result) => { 
     console.log(result); 
    }, (reason) => { 
     console.log(reason); 
    }); 
    } 
} 

i'am немного смущен, потому что я думал, что содержание используются для передачи параметров в модальном. Но, по-моему, это всего лишь имя, которое должен найти открытый метод, чтобы найти правильный шаблон?

Так как я могу передавать параметры?

Answer 1

Чтобы передать параметры/данные для модального, мое предположение было бы использовать componentInstance:

open(content) { 
    let modal: NgbModalRef = this.modalService.open(content, { size: 'lg' }); 

    (<MyComponent>model.componentInstance).data = 'hi'; 

    modal.result.then((result) => { 
     console.log(result); 
    }, (reason) => { 
     console.log(reason); 
    }); 
} 

Это предполагает, что componentInstance имеет тип MyComponent и что он имеет общественную собственность data

Answer 2

Вот как вы можете передать данные в ваш HTML шаблон в Angular2

import {Component} from '@angular/core'; 
import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
selector: 'add-customer-modal', 
template: ` 
<template #test let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    <h4 class="modal-title">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    {{MESSAGE_DATA}} 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> 
    </div> 
</template> 
<button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>`}) 

export class AddCustomerModal { 
    MESSAGE_DATA : any; 
    constructor(private modalService: NgbModal) {} 

    open(content) { 
     this.MESSAGE_DATA = "PASS DATA TO ANGULAR2 MODAL" 
     this.modalService.open(content, { size: 'lg' }).result.then((result) => { 
     console.log(result); 
     }, (reason) => { 
     console.log(reason); 
    }); 
} 
} 

проверить, как используется MESSAGE_DATA внутри HTML-шаблона.

Answer 3

Я бы предложил вам посмотреть пример Child Modal здесь ng2-bootstrap documentation for modals. Просто добавьте общедоступные переменные в родительский компонент и используйте их в своем модальном формате, используя стандартные методы привязки.

Таким образом, в примере, добавьте это в шаблон следующим образом:

 <div class="modal-body"> 
      {{parentMessage}} 
     </div> 

и изменить компонент, как это:

export class DemoModalChildComponent { 
    @ViewChild('childModal') public childModal:ModalDirective; 
    parentMessage = 'I am a child modal, opened from parent component!'; //Add this 

Теперь вам, что вы передаете в данных от родительского компонента может передавать данные в родительский компонент, следуя стандартным шаблонам.

Answer 4

Любой еще спотыкаясь на это могли бы найти это удобно, все, что вам нужно сделать, это объявить поле внутри ModalComponent так:

modalHeader: string; 
advertiser :Advertiser; 

Вы можете установить эти поля, выполнив следующие действия, когда вы открываете покадрово.

advertiserModalShow() { 
const activeModal = this.modalService.open(AdvertiserModal, {size: 'lg'}); 
activeModal.componentInstance.modalHeader = 'Advertiser'; 
activeModal.componentInstance.advertiser= this.selectedAdvertiser; 
} 

В шаблоне вы можете получить доступ к ним, как это:

value={{advertiser.code}} 

Надеется, что это помогает.