Angular 7 添加一页导航不起作用

Question

我将我的 angular 7 项目添加到 一页菜单选项，它无法正常工作，我使用 bootstrap 4 并尝试这样做example 任何人都知道如何正确添加这个

stack blitz sample

谢谢

这是我的代码

home.component.html

<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2>About this page</h2>
        <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
        <ul>
          <li>Clickable nav links that smooth scroll to page sections</li>
          <li>Responsive behavior when clicking nav links perfect for a one page website</li>
          <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
          <li>Minimal custom CSS so you are free to explore your own unique design options</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section id="services" class="bg-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2>Services we offer</h2>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
      </div>
    </div>
  </div>
</section>

<section id="contact">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2>Contact us</h2>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
      </div>
    </div>
  </div>
</section>

header.component.html

<header id="header">

  <div id="topbar">
    <div class="container">
      <div class="social-links">
        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
  </div>

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#services">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav></div>
</header><!-- #header -->

full-component.html

<app-header></app-header>
<router-outlet></router-outlet>

Answer 1

尝试将标头标签和代码放在 index.html 文件中。为我工作。

Answer 2

我刚刚创建了基本的 bootstrap Scrollspy 代码 sn-p，希望对您有所帮助。谢谢

function scrollSpy(v, e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $(v.hash).offset().top
    }, 500, function(){
        window.location.hash = v.hash;
    });
}

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
        });
    }, false);
})();

section {
  height: 250px;
}

nav ul {
  display: flex;
  list-style: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav id="rd-nav" class="scrollspy-nav">
        <ul>
            <li>
                <a class="nav-link" href="#rd-home" onclick="scrollSpy(this, event)">Home</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-how-we-work" onclick="scrollSpy(this, event)">How we work</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-what-we-do" onclick="scrollSpy(this, event)">What we do</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-portfolio" onclick="scrollSpy(this, event)">Portfolio</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-contact" onclick="scrollSpy(this, event)">Contact</a>
            </li>
        </ul>
    </nav>

    <article class="container">
      <section id="rd-home">Home | Section</section>
      <section id="rd-how-we-work">How we work | Section</section>
      <section id="rd-what-we-do">What we do | Section</section>
      <section id="rd-portfolio">Portfolio | Section</section>
      <section id="rd-contact">Contact | Section</section>
    </article>

    <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

在app.component.ts文件中创建一个函数scrollToElement()，然后从html中调用该函数

scrollToElement(element): void {
    element.scrollIntoView({behavior: "smooth", inline: "nearest"});
}

例如

<a class="nav-link js-scroll-trigger"  (click)="scrollToElement(about)">About</a>

其中about 是对要滚动到的元素的模板引用

<section id="about" #about>

查看更新后的Stackblitz