Question

mdb angular navbar无法在移动视图中使用

我是角色的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>

mdb angular navbar在移动视图中不起作用

1 个答案: