Angular 从Route Guard弹出模式对话框

当用户无法访问路由时，我们可以从博客帖子中弹出消息：

import { CanDeactivate } from '@angular/router';
import { CanDeactivateComponent } from './app/can-deactivate';

export class ConfirmDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {

  canDeactivate(target: CanDeactivateComponent) {
    if(target.hasChanges()){
        return window.confirm('Do you really want to cancel?');
    }
    return true;
  }
}

该模式是从另一个HTML文件加载的，其中包含了核心登录代码和选择器应用程序登录

<div class="modal-body">
  <app-login  #loginModal> </app-login>
</div>

这看起来很有用，但它是为bootstrap4设计的。你不能用它，但你可以用它

服务的使用示例

this.dialogService.show("Logged Out","You are out of here");

路线守卫的使用示例

async canActivate() {
  if (!this.auth.loggedIn()) {
    await this.loginDialogService.confirm();
    return this.auth.loggedIn();
  }
  return true;
}

服务的源代码

dialog.component.ts

import { Injectable }    from '@angular/core';
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent   {
    constructor(private modalService: NgbModal,public activeModal: NgbActiveModal) {}
    public title: string;
    public message: string;
}

@Injectable()
export class DialogService {  
  constructor(private modalService: NgbModal) {}

  public show(title: string, message:string) {
    const modalRef = this.modalService.open(DialogComponent);
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    return modalRef.result;
  }
}

dialog.component.html

<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.close()">
          <span aria-hidden="true">&times;</span>
        </button>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="activeModal.close()">Ok</button>
</div>

给你
@NgModule

首先要归功于优秀的博客。
你打算在所有组件中使用它吗？从我的route guard。你不能这样做。相反，你应该在应用程序中处理它。componentcool…..希望你得到clarityok。让我知道如果你需要任何帮助，它是否可以与bootstrap一起使用3.不担心css..但功能可以使用吗？用于bootstrap 4，但您可以为BS3任何其他支持promise方法的模式对话框编写代码。尝试使用可以激活类似于确认javascript的guard？从未来开始快速更新，如果您使用Angular 9+，则无需将其添加到
entryComponents
数组中，因为它是。
<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.close()">
          <span aria-hidden="true">&times;</span>
        </button>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="activeModal.close()">Ok</button>
</div>

entryComponents: [DialogComponent,LoginDialogComponent]