0

プロジェクトに nebular を使用していますが、実際にアラートを閉じるために NbAlertComponent を取得する方法がわかりませんclose button。閉じるとは、 をクリックした後に表示を停止することを意味しclose buttonます。アラート コンポーネントdocsに関するドキュメントを読みましたが、回答が見つかりませんでした。アラート コンポーネントはclosable、閉じるボタンを追加するプロパティを持つことができ、クリックされたときのイベント ハンドラーを持つことができます(close)="onClose()"。私はこのように使用しています（角度6）：

// page.component.html
<nb-alert status="success" closable (close)="onClose()">
  You have been successfully authenticated!
</nb-alert>

page.component.ts では、 method がある場合onClose、 alert をクリックするたびに起動しますclose buttonが、実際に閉じる方法は?

// page.component.ts
onClose() {

  // fires after each click on close button:
  console.log('close button was clicked');
}

アラート コンポーネント関連のクローズ機能のコードを次に示します。

// alert.component.ts
/**
  * Emits when chip is removed
  * @type EventEmitter<any>
  */
  // this is an instance of NbAlertComponent
  this.close = new EventEmitter();

/**
 * Emits the removed chip event
 */
NbAlertComponent.prototype.onClose = function () {
    this.close.emit();
};
4

1 に答える 1

3

*ngIfこの場合、Angular 自体が提供するディレクティブをそのように使用できるはずです。

// page.component.html
<nb-alert status="success" closable (close)="onClose()" *ngIf="alertIsOpen">
  You have been successfully authenticated!
</nb-alert>

alertIsOpen = true;

// page.component.ts
onClose() {
  // fires after each click on close button:
  console.log('close button was clicked');
  this.alertIsOpen = false;
}

複数のアラートに対しても機能する別のアプローチは、アラートを配列に存在させることです。

// page.component.html
<ng-container *ngFor="alert of alerts">
 <nb-alert status="{{alert.status}}" closable (close)="onClose(alert)">
   {{alert.text}}
 </nb-alert>
</ng-container>

alerts = [
 {
   status: "success",
   text: "You have been successfully authenticated!"
 },
 {
   status: "danger",
   text: "Failed to authenticate!"
 }
]

// page.component.ts
onClose(alert) {
  // fires after each click on close button:
  console.log('close button was clicked');
  this.alerts.splice(this.alerts.indexOf(alert), 1);
}

これらのアプローチの利点は、アラートを DOM 内に存在させたままにしないことです。

于 2019-01-19T14:10:22.833 に答える