如何將參數傳遞給模態？

這是我使用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); 
    }); 
    } 
}

我'有點困惑，因爲我認爲內容是用來傳遞參數模式。但在我看來，這只是開放方法需要找到正確模板的名稱？

那麼我該如何傳遞參數？

來源

2016-12-14 robert

在這裏閱讀更多信息：[http://stackoverflow.com/questions/39464345/best-practice-for-calling-the-ngbmodal-open-method](http://stackoverflow.com/questions/39464345 /最佳實踐調用ngbmodal開放方法） – PierreDuc

@PierreDuc謝謝！我怎樣才能將參數/數據傳遞給模態？ – robert

將參數/數據傳遞給模態，我的猜測是使用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

來源

2016-12-14 10:36:22 PierreDuc

以下是如何將數據傳遞到Angular2的HTML模板中

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模板裏面。

來源

2016-12-14 10:41:37

我建議你看看這裏的兒童模態示例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

現在你說你是在數據傳遞從父組件您可以通過遵循標準模式將數據傳遞給父組件。

來源

2017-03-03 13:37:03 GlennSills

還有人絆倒在此可能會發現這個方便的，所有你需要做的就是聲明一個字段中輸入您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}}

希望這有助於。

來源

2017-06-12 14:54:23

如何將參數傳遞給模態？

回答

相關問題