从 Route Guard 弹出模式对话框

Question

从博文protecting routes using guards in angular 我们可以在用户无法访问路由时弹出一条消息。 ：

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

我想显示一个使用ngx-bootstrap 的模式对话框以允许用户登录。

我已经设法从主应用程序中获得了一些简单的代码加载模式（例如，不是来自我的app.component.ts 的子视图），例如

showloginModal() {
  this.loginModal.show();
}

模态是从另一个 HTML 文件加载的（我在选择器 app-login 中包含核心登录代码

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

编辑 我刚刚查看了Angular2 DialogService – Exploring Bootstrap，看起来它可以完成这项工作，但它适用于 bootstrap4

Answer 1

ngx-bootstrap 无法做到这一点，但@ng-bootstrap/ng-bootstrap 可以。

Service 的用法示例

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

route guard 的用法示例

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>

您还需要将其设为entryComponent 添加

entryComponents: [DialogComponent,LoginDialogComponent]

给你@NgModule

感谢long2know 不错的博客。