Angular 6: 在同一页中导航到锚点
创始人
2024-10-16 06:01:01
0

在Angular 6中,可以使用Fragment来导航到同一页中的锚点。以下是一个示例:

首先,在你的组件模板中,使用锚点标记要导航的位置。例如:

Section 1

This is section 1.

Section 2

This is section 2.

Section 3

This is section 3.

然后,在组件的方法中,使用router.navigate方法来导航到具体的锚点。例如:

import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

  constructor(private router: Router) { }

  navigateToSection(section: string) {
    const navigationExtras: NavigationExtras = {
      fragment: section
    };

    this.router.navigate([], navigationExtras);
  }
}

最后,在模板中调用navigateToSection方法,并传递要导航到的锚点。例如:




当你点击这些按钮时,页面会滚动到对应的锚点位置。

希望这个示例能帮助到你!

相关内容

热门资讯

玩家必看教程!wepoker买... 玩家必看教程!wepoker买钻石有用吗,werplan怎么作弊,AI教程(有挂教程);致您一封信;...
如何分辨真伪!wepoker怎... 此外,数据分析德州(wepoker怎么设置透视)辅助神器app还具备辅助透视行为开挂功能,通过对客户...
必备教程!xpoker辅助神器... 必备教程!xpoker辅助神器,wepoker辅助器有哪些功能,科技教程(有挂方法);致您一封信;亲...
科技通报!aapoker破解侠... 科技通报!aapoker破解侠是真的吗,epoker透视,介绍教程(有挂神器)关于aapoker破解...
推荐十款!约局吧透视挂下载,约... 推荐十款!约局吧透视挂下载,约局吧德州真的有透视挂吗,扑克教程(有挂神器)准备好在约局吧德州真的有透...
攻略讲解!pokemmo手机版... 攻略讲解!pokemmo手机版脚本,hhpoker透视脚本视频,解密教程(有挂软件)是一款可以让一直...
分享实测!wepoker有什么... 分享实测!wepoker有什么规律,hardrock作弊,可靠教程(有挂软件)是由北京得wepoke...
交流学习经验!wepoker底... 交流学习经验!wepoker底牌透视,wepoker网页版透视方法,存在挂教程(有挂教程)关于wep...
发现玩家!德普之星辅助器,we... 1、发现玩家!德普之星辅助器,wepoker手机插件,曝光教程(有挂技巧);详细教程。2、德普之星辅...
一起来讨论!德州局透视脚本免费... 一起来讨论!德州局透视脚本免费版下载手机版,wepoker私人局俱乐部,AA德州教程(有挂技巧);致...