锚定在同一页面

Question

我正在创建一个基于 Angular 的 ionic 应用程序（第一次） 我创建了一张带有锚点的卡片，可将我发送到同一页面中的其他卡片。

 <ion-card>
          <ion-item  class="activated">
            <ion-icon name="camera" slot="start"></ion-icon>
            <ion-label  routerLink= "#visit">Pics</ion-label>
          </ion-item>
 </ion-card>

这个锚应该将我发送到具有相同 id="visit" 的卡片，但它不起作用。

<ion-card id="visit">
      <ion-card-header>
          <ion-card-title > 
          <ion-icon style="padding-top:5px" name="camera" ></ion-icon>
            Pictures
          </ion-card-title>
        </ion-card-header>
  </ion-card>

我查了谷歌，但我得到的所有结果都是关于其他问题的。

Answer 1

routerLink 属性是 Angular 转换到页面的方式，要连接到您自己页面中的锚点，请使用古老而酷的 <a href=#visit>

  <ion-card>
    <ion-item  class="activated">
      <ion-icon name="camera" slot="start"></ion-icon>
        <a href="#visit">
          <ion-label>Pics</ion-label>
        </a>
      </ion-icon>
    </ion-item>
  </ion-card>

另一种解决方案，为了使滚动流畅，您可以在点击 <ion-label (click)="scroll()">Pics</ion-label> 时调用方法并调用

 scroll() {
   var anchor = document.getElementById("visit");
   anchor.scrollIntoView({block: "end", behavior: "smooth"});
 }