如何在角度4中創建單獨的確認框組件4

Question

我正在處理角度4應用程序，並且我有確認框的要求。我想在列表中使用此確認框，每一行中都有一個圖標，點擊時會打開確認框，但我也不希望確認框的HTML會重複顯示。

我想將確認框的HTML寫在一個地方&我會在任何列表組件上使用該內容。

示例：在一個列表頁面上，確認框的HTML將只加載一次&我將盡可能多地使用該內容。

Answer 1

您可以創建一個Component作爲所需的確認框，並在其TypeScript中指定一個@input()，以便您可以使用HTML將數據（可能是此確認框所屬的行）提供給組件。

這樣，您的組件被指定了一次變量，並且可能會顯示不同的內容。你對於哪些信息應該是動態的以及確認框應該做什麼並不確定，所以我在這裏留下這個鏈接，進一步閱讀組件交互（我想這是你需要的。定義一次，用多次不同的內容） 。

角：組件交互 - https://angular.io/guide/component-interaction

Answer 2

你可以使用一個bootsrap模式

https://github.com/dougludlow/ng2-bs3-modal

在你的HTML一旦定義它像

<modal #myModal id="myModal"> 
    <modal-header [show-close]="true"> 
     <h4 class="modal-title">Confirmation</h4> 
    </modal-header> 
    <modal-body> 
     <div>{{someBinding}}</div> 
    </modal-body> 
    <modal-footer> 
     <input autofocus id="btModalYes" type="button" (click)="confirm()" value="Ok"/> 
     <input id="btModalNo" type="button" data-dismiss="modal" (click)="myModal.dismiss()" value="Cancel"> 
    </modal-footer> 
</modal> 

然後在你的組件，你可以改變帶有綁定的文字並打開模式

@ViewChild('myModal') 
myModal: ModalComponent; 

this.myModal.open(); 

你也可以在它自己的組件中使用這段代碼！

通過@Input標籤，您可以傳遞信息和事件發射器@Output，您可以通知父組件關於採取的操作。

https://angular.io/api/core/EventEmitter