Question

我正在努力完成这项任务，但却找不到如何做到这一点

我有一个带有两个按钮的代码是和否。我想要做的是，一旦我点击是按钮，成功消息应该打印在页面上（不弹出），同样的方式没有按钮也应该显示消息。无论如何用javascript或bootstrap做到了吗？

confirmation.component.html

Get-AzureRmAutomationCertificate

confirmation.components.ts

<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>

users.component.html

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)
  }

}

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;
   }

}

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

1 个答案: