Question

在博文protecting routes using guards in angular中，我们可以在用户无法访问路线时弹出消息。：

ViewBag.PageTitle

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

我设法从主应用程序中加载一些简单的代码加载模式（例如，不是我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; } }的子视图），例如

app.component.ts

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

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

修改的我刚刚看了一下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好博客。

来自Route Guard的弹出模态对话框

1 个答案: