mdb 角度导航栏在移动视图中不起作用

Question

mdb 角度导航栏在移动视图中不起作用

我是角度方面的 mdbootstrap 新手，当我检查 mdb-navbar 时它不起作用意味着当我配置为 routerLink 代替 href 并尝试单击移动视图中的链接时，链接正在打开但导航栏没有崩溃。有人可以帮我解决这个问题吗？

还有另一个问题，例如当我尝试将 mdb 角度滚动条放入服务页面并运行程序时，链接不起作用，因为它指向 http://localhost:4200/#test1 而不是 http://localhost:4200/services#test1。

请帮我解决这个问题。

下面是代码

 <!-- Links -->
 <ul class="navbar-nav mr-auto">
     <li class="nav-item ">
         <a class="nav-link waves-light" mdbRippleRadius routerLink="home">Home<span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link waves-light" mdbRippleRadius routerLink="about">About Me</a>
     </li>
     <li class="nav-item">
        <a class="nav-link waves-light" mdbRippleRadius routerLink="services">Services</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" mdbRippleRadius routerLink="contact">Contact US</a>
    </li>

 </ul>
 <!-- Links -->

 <!-- Search form -->
 <!---<form class="form-inline  waves-light" mdbRippleRadius>
     <input class="form-control mr-sm-2" type="text" placeholder="Search">
 </form>-->
 <div><i class="fa fa-user-circle-o" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;anu4looks@gmail.com<br>
    <i class="fa fa-mobile-phone" aria-hidden="true"></i>&nbsp; &nbsp;&nbsp;&nbsp;+91 9951877261</div>

Answer 1

在您的代码中，我只能看到最终的 html 输出。如果没有所有组件的代码，我只能建议您错过了正确的 mdb 角度构造。

要添加具有移动响应行为的导航栏，您需要添加适当的 mdb 角度组件 - 在您的情况下为 mdb-navbar。

Link to the official documentation

代码示例：

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
    <links>
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </links>
</mdb-navbar>

此代码按预期工作。

链接不起作用，因为它指向 http://localhost:4200/#test1 而不是 http://localhost:4200/services#test1。

同样，没有代码示例，我只能猜测。看起来你正在使用Scrollbar and SmoothScroll

根据您描述的链接行为 - 可能是 href="#test1" 中的路径值有问题。 如果平滑滚动链接的 href 属性的值为href="/#test1"，则会导致此类问题。

检查此值并将其与示例 from the documentation 对齐。

代码示例

<!--Navigation links with a Smooth SCroll effect-->
<ul class="list-unstyled">
  <li>
    <h5><a mdbPageScroll href="#test1">Click to scroll to section 1</a></h5>
  </li>
  <br>
  <li>
    <h5><a mdbPageScroll href="#test2">Click to scroll to section 2</a></h5>
  </li>
  <br>
</ul>

<!--Dummy sections with IDs coressponding with the links above-->
<div id="test1" style="height: 1000px;">
  <h3>Section 1</h3>
</div>

<div id="test2" style="height: 1000px;">
  <h3>Section 2</h3>
</div>