我有以下示例代码来解释我的疑问。
我有一个带有 a 的“a”标签 ,用于href="#menu"
指向同一页面的另一部分(nav
带有 的那个id="menu"
)。使用HTML
pure 我没有任何问题,实际上它显示的 url 是正确的(带有后缀#menu
),但是当我想将它传递给我的 Angular 项目时它不起作用。
从我看到的情况来看,它会将我重定向到pagina 404
我为不使用的路由配置的路由,我认为这是因为添加到URL的后缀。
问题是如何将这种行为应用到我想要应用它的 Angular 项目中?
我的代码:
<div class=" logo jumbotron card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ; display:flex; justify-content:center; align-items:center;">
<div class="text-white text-center py-5 px-4">
<div>
<a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; " class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--Navbar-->
<nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">naveacion</a>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
非常感谢您提前...
从6.1版开始,它为此目的
Angular
加入了该功能。它的实现比需要RouterModule及其ExtraOptionsAnchor Scrolling
的传统位置方法稍微复杂一些。代码将是这样的:HTML
在主模块中
app.module.ts
:在您的组件逻辑中
app.component.ts
(使用视图部分定义 aarray
。这是可选的,您可以直接在视图中应用名称)在您的组件视图中
app.component.html
希望对你有帮助,问候。
我不确定这是否是 angular 自己的指令,但在 ionic 中它工作正常(Ionic 非常有角度),所以请尝试以下操作,而不是放置一个 href,而是放入您的 HTML,例如:
如果我没记错的话,这适用于延迟加载,请查看此链接:
https://medium.com/@HenryGBC/c%C3%B3mo-implement-lazy-loading-in-angular-74b6e85d021f
该角度指令适用于任何可点击对象。