警报成功和警报危险消息按钮

Question

我正在努力完成这项工作，但找不到如何做到这一点

我有一个带有两个按钮是和否的代码。我想要做的是，一旦我点击是按钮，成功消息应该打印在页面上（不是弹出窗口），同样没有按钮也应该显示消息。有没有办法用 javascript 或 bootstrap 来做？

confirmation.component.html

<div class="modal fade" id="confirmationModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>{{confirmationMessage}}</p>
        <button type="button" data-dismiss="modal" class="btn btn-success" (click)="emitAction(true)">Yes</button>
        <button type="button" data-dismiss="modal" class="btn btn-danger" (click)="emitAction(false)">No</button>
      </div>
    </div>
  </div>
</div>

confirmation.components.ts

import { Component, OnInit } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-confirmation',
  templateUrl: './confirmation.component.html',
  styleUrls: ['./confirmation.component.css']
})
export class ConfirmationComponent implements OnInit {

  @Output() action:EventEmitter<Boolean> = new EventEmitter<Boolean>();
  @Input() confirmationMessage;
  constructor() { }

  ngOnInit() {

  }

  emitAction(isConfirmed:Boolean){
    this.action.emit(isConfirmed)
  }

}

users.component.html

<div class="container">   <h2>Active Users</h2>   <hr>   <table datatable  [dtTrigger]="dtTrigger" class="table table-striped table-bordered hover">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody *ngIf="!showLoader">
      <tr *ngFor="let user of users">
        <td>{{user.local.username}}</td>
        <td>{{user.local.email}}</td>
        <td>
          <div *ngIf="user.local.sub_end_dt && (user.local.sub_end_dt| amDifference : dateTo : 'days')>=0">
            <span style="color: green;">{{(user.local.sub_end_dt| amDifference : dateTo : 'days')>=0?"Active":""}}</span>
            <br>
            <span>{{(user.local.sub_end_dt| amDifference : dateTo : 'days')}} Days Remaining</span>
          </div>
          <span style="color: red;">{{(user.local.sub_end_dt| amDifference : dateTo : 'days')<0||!user.local.sub_end_dt?"Expired":""}}</span>  
        </td>
        <td>
          <i class="fa fa-clipboard" aria-hidden="true" style="cursor: pointer;" (click)="copyPassword(user.local.password)" title="Copy Password"></i>
          |<i class="fa fa-trash-o" aria-hidden="true" (click)="setAction('delete',user,'Do you wish to delete the user?')" data-toggle="modal" data-target="#confirmationModal"  style="color: red; cursor: pointer;" title="Delete User"></i>
          |<i class="fa fa-ban" *ngIf="user.local.sub_active" (click)="setAction('disable',user,'Do you wish to disable the user?')" data-toggle="modal" data-target="#confirmationModal"  aria-hidden="true" style="color: orange;cursor: pointer;" title="Disable User" ></i>
          <i class="fa fa-check" *ngIf="!user.local.sub_active" (click)="setAction('enable',user,'Do you wish to enable the user?')" data-toggle="modal" data-target="#confirmationModal"  aria-hidden="true" style="color: green;cursor: pointer;" title="Enable User"></i>
          |<i class="fa fa-user-secret" *ngIf="!user.admin" (click)="setAction('enableAdmin',user,'Do you wish to grant admin role to user?')" data-toggle="modal" data-target="#confirmationModal" aria-hidden="true" style="cursor: pointer;" title="Make User Admin"></i>
          <i class="fa fa-user" style="color: grey;cursor: pointer;" *ngIf="user.admin" (click)="setAction('disableAdmin',user,'Do you wish to disable admin access for user?')"  data-toggle="modal" data-target="#confirmationModal" title="Disable Admin User" aria-hidden="true"></i>
          |<i class="fa fa-user-plus" aria-hidden="true" style="color: blue;cursor: pointer;" *ngIf="!user.support" (click)="setAction('enableSupport',user,'Do you wish to assign support to user?')" data-toggle="modal" data-target="#confirmationModal"  title="Assign Support"></i>
          <i class="fa fa-user-times" aria-hidden="true" data-toggle="modal" data-target="#confirmationModal" style="color: orange;cursor: pointer;" *ngIf="user.support" (click)="setAction('disableSupport',user,'Do you wish to disable support for user?')" title="Disable Support"></i>
        </td>
        </tr>
      </tbody>
    </table>
    <div style="text-align: center;" *ngIf="showLoader">
        <i class="fa fa-spinner fa-5x fa-spin" aria-hidden="true"></i>
    </div> </div> <app-confirmation (action)="action($event)" [confirmationMessage]="message"></app-confirmation>

Answer 1

定义一个新模型：

export class ConfirmationMessage{
message: string;
result: boolean;
}

在confirmation.component.ts中

import { Component, OnInit } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';
import { ConfirmationMessage } from ./confirmation-message';

@Component({
  selector: 'app-confirmation',
  templateUrl: './confirmation.component.html',
  styleUrls: ['./confirmation.component.css']
})
export class ConfirmationComponent implements OnInit {

  @Output() action:EventEmitter<ConfirmationMessage> = new EventEmitter<ConfirmationMessage>();
  @Input() confirmationMessage;
  constructor() { }

  ngOnInit() {

  }

  emitAction(isConfirmed:Boolean){
    confirmation: ConfirmationMessage = new ConfirmationMessage();
    confirmation.result = isConfirmed;
    if(isConfirmed)
       confirmation.message ="ok";
    else
       confirmation.message = "no";
    this.action.emit(confirmation);
  }

}

在 users.component.html 中

 <app-confirmation (action)="actionElaborate($event)" [confirmationMessage]="message"></app-confirmation>
...
<p >{{messageToShow}}</p> //here to show an alert you can use bootstrap alert and show it or not with ngIf

在 users.component.ts 中

private messageToShow: string = "";

actionElaborate(ev){
   if(ev != null){
     this.messageToShow = "";    
   }else{
      ...
      confirmation: ConfirmationMessage = ev;
      this.messageToShow = confirmation.message;
   }

}