md-sidenav 阻止锚标签工作

Question

好的，Angular 4、Angular Material 2、Node 8（尽管 6.x 存在问题）。使用带有锚标签的 md-sidenav 作为内容。 CSS 没有击中它们，点击也无济于事。结帐打开标签，尝试将模式切换为 over、push 和 side - 问题仍然存在。 MdSidevnavModule 已导入我的应用程序模块中，否则按预期工作。尝试将锚标签更改为按钮 - 同样的问题。如果我遗漏了一些愚蠢的东西或缺少诊断所需的信息，我会提前道歉。提前致谢。

<md-sidenav-container class="container mat-elevation-z12" 
color="primary">

<md-sidenav #sidenav mode="push" class="sidenav">
<div class="contact-container">
  <a href="#"><h1 id="call-to-action">Contact</h1></a>
  <a href="https://www.google.com">
    <i class="fa fa-linkedin-square fa-5x social-icon" id="linkedin" 
aria-hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-github-square fa-5x social-icon" id="github" aria-
hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-facebook-official fa-5x social-icon" id="facebook" 
aria-hidden="true"></i>
  </a>
  <a href="https://www.google.com">
    <i class="fa fa-twitter-square fa-5x social-icon" id="twitter" 
aria-hidden="true"></i>
  </a>
</div>
</md-sidenav>

<div class="sidenav-content">
  <h1 class="banner">Hey</h1>   
</div>

</md-sidenav-container>

Answer 1

不，它不会阻止它工作。这个问题可能是错误的font awesome 图标。

我的示例代码

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
    <a href="https://www.google.com">
       <i class="fa fa-facebook" id="twitter" aria-hidden="true"></i>
    </a>
    <a href="https://www.google.com">
      <i class="fa fa-google" id="twitter" aria-hidden="true"></i>
    </a>
  </md-sidenav>
</md-sidenav-container>

注意：使用这个post 来获得令人敬畏的字体

LIVE DEMO说明锚标签在md-side-nav中的工作原理

Answer 2

我很抱歉 - 问题已解决。我知道这会很傻 facepalm

我的 sidenav 上有一个 z-index -1（我不记得为什么），它阻止了任何点击。啊。