Javascript onclick 事件在 Angular 中不同步

Question

使用 Angular 框架构建我网站的前端，我试图包含一个 button/icon 能够打开和关闭此 sidenav:

<nav id="left-sidenav" class="sidenav">
<div class="local_nav">
    <a class="link" href="#">About</a>
    <a class="link" href="#">Services</a>
    <a class="link" href="#">Clients</a>
    <a class="link" href="#">Contact</a>
</div>
</nav>

我在 codepen.io 上发现了一个很酷的 hamburger fold-out menu，我最终以这种方式对 HTML 代码进行了建模。

<div id="menuToggle">
<input type="checkbox" onclick="toggleNav()" />
<span></span>
<span></span>
<span></span>
<ul id="menu"></ul>
</div>

这是 toggleNav() 函数（添加到 index.html head）：

<script>
    //sidenav-width: 150px (this is defined in sidenav.component.scss)
    function toggleNav() {
        var x = document.getElementById("left-sidenav");
        if (x.style.width === "0px") {
            //openNav
            x.style.width = "150px";
        } else {
            //closeNav
            x.style.width = "0px";
        }
    }
</script>

所以当页面加载时，它看起来像这样 [请不要介意图片，这是我第一次使用 Angular，我正在努力变得更好 :) ]： Reloaded page

现在，出于某种原因，当尝试使用这个汉堡菜单时，第一次点击不会触发 onclick 事件，图标最终会变成（它应该做的）十字形（见 codepen.io CSS)。 Page after the first click

虽然在第二次点击时，事件似乎开始起作用，sidenav 终于出现了，十字又恢复为汉堡图标。如果我一直点击汉堡，它就会正常工作，图标会不同步。 Page after the second click; Page after the third click

这对我来说毫无意义，我最初想在 sidenav 显示时获得十字，而不是在它隐藏时。有谁知道如何真正解决这个问题？

Answer 1

您可以为此更改函数 toggleNav() 的实现：

在你的 .ts 文件中添加这个。

toggle: boolean = false;

toggleNav() {
    this.toggle = !this.toggle;
    window.scrollTo(0, 0);
  }

Answer 2

我已经为此苦苦挣扎了 6 天，但我终于通过这样更改 JS 代码解决了这个问题：

<script>
    //sidenav-width: 150px        
    var open = false;

    function toggleNav() {
        let x = document.getElementById("left-sidenav");
        if (open == false) {
            //openNav
            x.style.width = "150px";
        }
        if (open == true) {
            //closeNav
            x.style.width = "0px";
        }
        open = !open;
    }
</script>

这不是 Angular 中处理此问题的最正确方法，但它确实有效。如果您觉得这有帮助，或者是否有更合适的方法来解决这个问题，请告诉我。

Javascript onclick 事件在 Angular 中不同步

Javascript onclick event out of phase in Angular

html

javascript

css

onclick

angular