1. 在app.module.ts文件中导入RouterModule，并在imports数组中添加RouterModule.forRoot([])。

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ // 定义路由 ];

@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

2. 在HTML模板中，使用RouterLink指令将链接绑定到片段标识符。

Link to Section 1

3. 在组件中，可以使用ActivatedRoute服务来获取当前路由的片段标识符。

import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-section', templateUrl: './section.component.html', styleUrls: ['./section.component.css'] }) export class SectionComponent implements OnInit { fragment: string;

constructor(private route: ActivatedRoute) { }

ngOnInit() { this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); } }

4. 如果要在初始化时滚动到片段，则可以使用ViewChild和ElementRef获取DOM元素，并使用scrollIntoView方法滚动到该元素。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-section', templateUrl: './section.component.html', styleUrls: ['./section.component.css'] }) export class SectionComponent implements OnInit { @ViewChild('section1') section1: ElementRef;

constructor(private route: ActivatedRoute) { }

ngOnInit() { this.route.fragment.subscribe(fragment => { if (fragment === 'section1') { this.section1.nativeElement.scrollIntoView(); } }); } }

注意：片段标识符需要在路由定义中定义为一个参数。例如：

const routes: Routes = [ { path: 'page', component: PageComponent }, { path: 'page/:fragment', component: PageComponent } ];