Question

如何通过键入url链接而不使用任何单击功能来打开模式弹出窗口。在这里，我试图打开模态而不通过键入url登录，但模态出现几秒钟后它就消失了。如果已登录，则localstorage中将显示email和passowrd，将打开模态。即使没有登录，即使本地存储中没有电子邮件和密码，我也需要打开模态。

reset.html

＆＃13;

<div bsModal  *ngIf="isModalShown" [config]="{ show: true }"  #resetPwd="bs-modal" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Reset Password</h4>
        </div>
        <div class="modal-body">
          Modal body
        </div>
    </div>
  </div>
</div>

＆＃13;

reset.component.ts

＆＃13;

import { Component, OnInit,ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { ModalDirective} from 'ngx-bootstrap';

@Component({
  templateUrl: './reset.html'
})

export class ResetComponent {
  constructor(public router: Router) {}
  @ViewChild('resetPwd') public resetPwd:ModalDirective;

  public isModalShown: boolean = true;

  ngOnInit(){
    this.showModal();
  }

  showModal(){
    this.isModalShown = true;
    this.router.navigate(['/reset']);
    this.resetPwd.show();
    console.log(this.isModalShown);
   
  }
  onHidden(){
    this.isModalShown = false;
    this.router.navigate(['/login']);
    this.resetPwd.hide();
    console.log(this.isModalShown);

  }
}

＆＃13;

Answer 1

我使用UI-Router，因此设置和状态定义与内置路由器不完全匹配，但我相信内置路由器中也有以下机制：我建议为模态视图定义状态特定？甚至将“背景视图”设置为父视图以在背景上显示模态。这将为您提供专门用于您所使用的模态视图的URL路径。

如何通过键入特定模板的URL来打开页面加载模式

reset.html

reset.component.ts

1 个答案: