必须双击 Angular 应用程序中的链接才能触发功能答案

【问题标题】：Have to Double Click Links in Angular App To Fire Off Function必须双击 Angular 应用程序中的链接才能触发功能
【发布时间】：2018-11-30 15:37:01
【问题描述】：

我现在正在开发一个 Angular 应用程序，并且我有一个带有 <a> 标记链接的导航栏。每次单击其中一个链接时，我都希望切换一个标志变量，以便我可以隐藏导航栏并显示另一个组件。

现在，我正在 Chrome 上查看我的网站，我必须点击链接 2 次才能触发切换功能。这是下面的html代码。

<div class="jumbotron jumbotron-fluid" style="padding-top:0" *ngIf="showFlag === true">
    <nav class="navbar">
      <!-- <p>{{showFlag}}</p> -->
      <ul class="navbar-nav" id="link-nav" style="width:30%">
        <li class="nav-item">
          <span>
            <a class="nav-link" (click)="toggleComponent()">My Story</a>
            <hr>
          </span>
        </li>

上面的 sn-p 是我认为我可以在显示和隐藏这个 jumbotron 之间切换的方式。需要注意的是，这个组件被称为header，它嵌套在另一个组件中。我不知道这是否是我必须双击链接的原因... 结构如下：

<div id="particles-js">
    <app-header></app-header>
</div>

谁能帮帮我？

【问题讨论】：

由于你使用的是标签，你仍然需要给它一个 href 属性（即 href="javascript:void(0)"
谢谢@rrd。嗯，我刚刚添加了 href，我仍然有这个双击问题......
你能用这个例子做一个stackblitz :) 吗？
@Alann 我试图为这个例子制作一个基本的堆栈闪电战。它在这里。 link stackblitz 代码不会出现此问题。它也需要一些努力才能到达那里。我有一种预感，这个问题可能是因为我已经将此组件嵌套在另一个组件中，而它的父级可能就像一个覆盖？还是只有我这么认为

标签： angular typescript angular5 angular-ng-if

【解决方案1】：

我发现问题出在此标记容器的 CSS 中。

我在 CSS 中添加了position:fixed;，这使它具有这种叠加效果。

删除它解决了这个问题。

【讨论】：