Question

我试图在我的jsonwebtoken快要到期时触发引导程序模式。

我可以通过导航栏上的按钮来触发模式，但是我无法从函数中触发模式。

当我尝试使用this.openRenew（renew）触发模式时；我收到找不到名称的续订错误，

**** navbar.html
<!-- Renew Token -->
<ng-template #renew let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="renewModal">Renew Log In</h4>
        <button type="button" class="close" aria-label="Close 
            (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
         </button>
    </div>
    <div class="modal-body">
        Your Session In About To Expire.
        For Security Please Confirm Your Password To Continue.
        <form>
            <div class="form-group">
                <label for="password">Password</label>
                <input id="password" class="form-control"
                    placeholder="Password" name="password">
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" 
            (click)="modal.close('Save click')">Log Back In</button>
    </div>
</ng-template>


**** navbar.ts

constructor(
    public _auth:AuthService,
    public _router:Router,
    public modalService: NgbModal) {
        this._auth.time.subscribe((now: Date) => {
            this.currentTime = now.valueOf();
            if(!!this._auth.emToken){
                if (!this.timeToRenew || this._auth.emExpTime==null){
                    console.log('Checking Time to renew', 
                        this._auth.emExpTime*1000-this.currentTime );
                    if((this._auth.emExpTime*1000)-45000<this.currentTime){
                        this.timeToRenew = true;
                        console.log('Time to Log Back In');
                         / * Need to trigger openRenew() here *
                    }
                }
            }
        });
    }

openRenew(renew) {
    this.modalService.open(renew, {ariaLabelledBy: 
         'renewModal'}).result.then(
         (result) => {
             console.log(result);
             // validate password 
    });
 }

Answer 1

我整理了一个StackBlitz demo来展示此方法。大约10秒钟后，它将自动显示模态。

要使代码正常工作，您需要对代码进行一些更改：

i。通过使用以下代码将模板声明为类变量，并使用@ViewChild在HTML中获取对模式模板的引用，确保可以在TS文件中获得对模式模板的引用：

@ViewChild('renew')
private renew: TemplateRef<any>;

我已经修改了逻辑，使演示更简单-在本示例中，AuthService每5秒触发一次时间。组件会侦听此消息，并且如果AuthService发出的时间戳记在创建组件后大于10秒，则会显示模态。

ii。您需要将订阅分配给变量subscription，以便在打开模式时可以取消订阅：

// 1. Maintain a reference to the subscription
const subscription: Subscription = this._auth.time.subscribe((now: Date) => {
    ...
    if (/*should renew*/) {
        this.openRenew(this.renew);
        subscription.unsubscribe(); // 2. Unsubscribe here after opening modal
    }
});

这可以防止每次AuthService发出时间戳时，其他模态都显示在原始模态的顶部。

从倒数功能中触发模态

1 个答案: