时间戳

首页 > 解决方案 > Angular11 路由和滚动到锚点

angular - Angular11 路由和滚动到锚点

问题描述

大家好，我是 Angular 的新手，

我正在使用AngularCLI，Angular 版本是11. 我有一个简单的Bootstrap 4模板，我想在我的Angular 11应用程序中重用它。

现在模板是这样的：

<html>
 <header>
  ....
  <ul>
    <li><a href="#contact">CONTACT</a></li>
    <li>GROUP</li>
  </ul>
 </header>

 <main>
   <section id="group">
   ....................
   </section>

   <section id="contact>
   ....................
   </section>
 </main>

该模板还有一个.js文件，当用户单击链接时，会平滑地自动滚动到相关锚点。

现在我把它放在 Angular 中，一切正常，但现在我想路由到一个组件，该组件将填充来自服务器的数据。因此我尝试写：

<li><a href="#contact" (click)="scroll(contact)">CONTACT</a></li>
.....
.....

<section id="group">
   ..........
</section>
<section #contact id="contact>
  <router-outlet></router-outlet>
</section>

在 component.ts 中：

scroll(el: HTMLElement) {
  el.scrollIntoView();
  el.setAttribute("class", "active");
}

但不起作用，因为调用组件刷新我的页面，我可视化第一部分而不是第二部分。

我到处搜索，但有很多可能的解决方案，而我的 Angular 版本却没有。做这种事情的最好方法是什么？

无论如何，我认为我的 Angular 架构是错误的.. 也许router-outlet应该包含整个页面，并且在部分中我将不得不放置一些东西*ngIf来查看是否有数据要显示？

谢谢

标签： angularbootstrap-4routesanchor

解决方案

推荐阅读