我已将我的 angular 7 项目添加到一个页面菜单选项，它无法正常工作，我使用了引导程序4，并尝试这样做{{3} } 任何人都知道如何正确添加
谢谢
这是我的代码
home.component.html
@post = Post.find_by_id(params[:post_id])header.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>
full-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 -->
答案 0 :(得分：1)
在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
答案 1 :(得分：1)
我刚刚创建了基本的 bootstrap Scrollspy 代码段，希望对您有所帮助。谢谢
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>
答案 2 :(得分：0)
尝试将标题标记和代码放在 index.html 文件中。为我工作。