0

我有一个包含 3 个组件的页面：

  1. 简介，带有点击按钮的普通屏幕（加载第 2 部分）
  2. 演示，包含n 个步骤（单击第 1 部分按钮后全屏加载的 div，并根据步骤编号加载元素）
  3. 结论（最后一部分，在最后一步之后加载，不再全屏）

下面，有一个简化的代码示例来解释这个想法：

html

<ng-container *ngIf="part === 0">
    <button (click)="startDemo()">Start</button>
</ng-container>
<div #fullscreen [hidden]="part == 0 || demoEnded">
    <div [hidden]="part != 1"><button (click)="goNext()">Next</button></div>
    <div [hidden]="part != 2"><button (click)="goNext()">Next</button></div>
    <div [hidden]="part != 3"><button (click)="goNext()">Next</button></div>
</div>
<ng-container *ngIf="demoEnded">
    <span>Yaay! You finished!</span>
</ng-container>

打字稿

@ViewChild('fullscreen', { static: false }) divRef: ElementRef;
part = 0;
demoEnded = false;

startDemo() {
    this.part = 1;
    const elem = this.divRef.nativeElement;
    elem.requestFullscreen();
}

next() {
    this.part++;
    if (this.part > 3){
        document.exitFullscreen();
        demoEnded = true;
    }
}

单击按钮时效果很好。部件已更新，变量part和demoEnded控制页面部件。
我面临的问题是如果用户在全屏模式下按下 ESC 按钮。
首先，我创建了一个附加到 fullscreenchange 事件的函数，如下所示：

document.addEventListener("fullscreenchange", this.closeFullScreen);

closeFullScreen() {
    if (!this.fullscreenActive) {
        this.fullscreenActive = true; // need this step because event listener catches first change which opens fullscreen mode
        return;
    }

    console.log('demoEnded:' + this.demoEnded); // in this time, if clicked ESC, this.demoEnded is undefined
    this.demoEnded = true;
}

当页面从全屏返回时，此函数被正确调用，但此时，当单击 ESC 时，demoEnded属性未定义，因此我的 div 没有正确隐藏，也没有加载下一个容器。
在上下文中存储变量时，这似乎是与 HTML 与 Angular 相关的错误。
编辑：即使在我捕获的事件期间未明确定义该属性，但似乎返回了上下文，因为演示停留在我单击 ESC 时所在的页面上，而不是从头开始。此外，如果我继续单击“下一步”按钮，则演示在全屏时以相同的方式完成。
有人知道我在这种方法中是否做错了什么？
笔记：

  • 我使用 div 并隐藏它的原因是我需要 div 元素在进入全屏时存在。使用带有 *ngIf 的容器，当我单击第一个按钮时，该元素将不存在，所以我没有让它全屏显示。
  • 我只在Chrome上进行测试，因为这将是唯一使用的浏览器。

我的解决方法

在我发现我的变量未定义后，我想出了这个姑息解决方案：

Html（用一种方法替换了我的变量）

<div #fullscreen [hidden]="part == 0 || isDemoEnded()">

打字稿（将我的变量保存到 localStorage 并在需要时检索）

// saving the value to localStorage in code control parts
localStorage.setItem('demoEnded', 'false');
localStorage.setItem('demoEnded', 'true');

// retrieving the value from localStorage when calling the method
isDemoEnded() {
    return localStorage.getItem('demoEnded') === "true";
}

该解决方案有效，因此它可以帮助其他人解决同样的问题。
但我仍然对此感到困惑。
我应该为 Angular 提交错误吗？或者也许是铬？
这个解决方案可以吗，还是有另一种（更好的）方法来解决这个问题？

提前致谢

4

0 回答 0