单击链接后，Angular如何转到页面的特定部分

Question

这是单击上面的链接时出现角度的常见问题页面的模板代码或html代码（请参阅参考图片），我想向下滚动到页面上提供链接的某些部分，请帮助我做这个！！！

<div id="wrap-content-v1" class="wrap-content">
<div class="main">
    <div>
        <div id="summary">
            <span [innerHTML]="'tk.faq.summaryPageTitle' | translateHTML" id="faq_title" class="faq_title">
            </span><br>
            <span [innerHTML]="'tk.faq.summaryPageSubtitle' | translateHTML" id="faq_subtitle" class="faq_subtitle">
            </span>
            <br>
            <br>
            <div id="faqSummaryList{{faqSection.rank}}"
                *ngFor="let faqSection of faqSectionlist.FAQContentDisplayBean.faqSectionList">


                <div *ngIf="faqSection.summaryTitle!==null && faqSection.summaryTitle.length>0"
                    class="faq_textBullet" id="faqSummaryDisplay{{faqSection.rank}}">
                    <a (click)="gotoPagedivwithRank('faqSection.rank')" class="faq_summaryTitle"
                        id="faqSummary{{faqSection.rank}}" onmouseover="" style="cursor: pointer;">
                        <span id="faqSummaryValue{{faqSection.rank}}">{{faqSection.summaryTitle}}</span></a>
                </div>

            </div>
        </div>
        <br>
        <div *ngFor="let faqSection of faqSectionlist.FAQContentDisplayBean.faqSectionList">
            <div *ngFor="let faqSubsection of faqSection.faqSubsectionList">
                <ng-container [ngSwitch]="faqSubsection.type">
                    <div *ngSwitchCase="'Title'" id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Title">
                        <span class="faq_title" id="faq_subtitle">{{faqSubsection.text}}
                        </span><br> <br>
                    </div>
                    <div *ngSwitchCase="'Subtitle'" id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Subtitle">
                        <span class="faq_subtitle" id="faq_subtitle">{{faqSubsection.text}}
                        </span><br>
                        <br>
                    </div>
                    <div *ngSwitchCase="'Text'" id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Text">
                        <span class="faq_text" id="faq_text">{{faqSubsection.text}}</span><br>
                    </div>
                    <div *ngSwitchCase="'TextWithBullet'"
                        id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_TextWithBullet">
                        <span class="faq_textBullet" id="faq_textBullet"><span class="faq_textWithBullet"
                                id="faq_textWithBullet">{{faqSubsection.text}}</span></span>
                    </div>
                    <div *ngSwitchCase="'Image'" id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Image">
                        <img src="faqSubsection.image" alt="image" class="faq_image" id="faq_image" /><br>
                        <br>
                    </div>
                    <div *ngSwitchCase="'Link' && identifyLink(faqSubsection.linkURL)"
                        id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_ExternalLink" class="faq_link">
                        <a href="{{faqSubsection.linkURL}}" id="faq_external_link"><span class="faq_link"
                                id="faq_link">{{faqSubsection.text}}</span></a><br>
                    </div>
                    <div *ngSwitchCase="'Link' && identifyLink(faqSubsection.linkURL)!==null"
                        id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_InternalLink" class="faq_link">
                        <a id="gotoPageDivWithURL" (click)="gotoPageDivWithURL(faqSubsection.linkURL)"
                            onmouseover="" style="cursor: pointer;"><span class="faq_link"
                                id="faq_link">{{faqSubsection.text}}</span></a><br>
                    </div>
                    <div *ngSwitchCase="'Item'" id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Item">
                        <span class="faq_itemBullet" id="faq_itemBullet"><span class="faq_item"
                                id="faq_item">{{faqSubsection.text}}</span></span>
                    </div>
                </ng-container>
            </div>
            <br><br> <a (click)="gotoPageDiv()" class="goToHomeFAQ" id="goToHomeFAQ{{faqSection.rank}}"
                onmouseover="" style="cursor: pointer;"></a><br>
            <br>
        </div>
    </div>
</div>

这是模板的组成部分：

 import { Location, ViewportScroller } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FaqResponse } from '@models/faq/faqResponse';
 import { FaqService } from '@myse/faq/faq.service';
 import { Subscription } from 'rxjs';

 @Component({
    providers: [Location],
    selector: 'myse-faq',
    styleUrls: ['./faq.component.scss'],
    templateUrl: './faq.component.html'
  })
 export class FaqComponent implements OnInit, OnDestroy {
   faqSectionlist: FaqResponse;
   subscription: Subscription;

 gotoPageWithRank: any;
 gotoPagedivWithRank: any;
 identifylink: any;
 rank: any;
 divName: any;

constructor(
  private readonly faqservice: FaqService,
  private readonly router: Router,
  private readonly route: ActivatedRoute,
  private readonly viewportScroller: ViewportScroller
) { }

async ngOnInit() {
  this.faqSectionlist = await this.faqservice.getFaqContent();

}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

gotoPageDiv() {

  window.scroll({
   behavior: 'auto',
   left: 0,
   top: 0
 });

}

 gotoPagedivwithRank(elementId: any): void {
 this.viewportScroller.scrollToAnchor(elementId);

}
gotoPageDivWithURL(url) {
  this.divName = String(url);
}

 identifyLink(link) {
   if (link == null) {
   this.identifylink = null;
   return this.identifyLink;
  } else {
  if (link.substring(0, 3) === 'faq') {
     this.rank = link.substring(3);
     } else {
     this.identifylink = null;
     return this.identifylink;
   }
 }
  }
}

这是我想要通过上面的链接将其定向到以下页面的某些部分的输出图像

The Link part of the page from which certain part of the page will be directed to if clicked

The page is divided in ranks like this