SrollToTop方法不适用于Ionic 6/Angular中的组件

uinbv5nw 于 2022-12-09 发布在 Ionic

关注(0)|答案(2)|浏览(150)

I have made a fabbutton so the user can scroll to top in one click. I have test this without a component and this was working fine. Now I want to use this fabbutton as a component, because I want to use this in multiple pages.
This my component setup:

fabbutton.component.html

<div class="fixed">
  <ion-fab vertical="bottom" horizontal="end" edge slot="fixed">
    <ion-fab-button class="toolbar-color" size="small" (click)="scrollToTop()">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</div>

I use a custom css class to make it stick when the user scrolls

fabbutton.component.scss

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

Why ion-fab-button doesn't stay fixed inside ionic 4 popover?
This is working fine.
Now I have method to scroll to top in the ts file.

fabbutton.component.ts

export class FabbuttonComponent {

  @ViewChild(IonContent, { static: false }) content: IonContent;

  scrollToTop() {
    this.content.scrollToTop(1500);
  }

}

I use the selector like this in my homepage.

Home.html

<ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content color="secondary" [scrollEvents]="true">
    <app-fabbutton></app-fabbutton>
  </ion-content>

I also inject the component in the home.module file.
When I test the app I get the following error:
core.mjs:6494 ERROR TypeError: Cannot read properties of undefined (reading 'scrollToTop') at FabbuttonComponent.scrollToTop (fabbutton.component.ts:14:18) at FabbuttonComponent_Template_ion_fab_button_click_2_listener (template.html:3:56) at executeListenerWithErrorHandling (core.mjs:15031:1) at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15069:1) at HostElement. (platform-browser.mjs:466:38) at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:443:1) at Object.onInvokeTask (core.mjs:25595:1) at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:442:1) at Zone.push.3484.Zone.runTask (zone.js:214:1) at ZoneTask.push.3484.ZoneTask.invokeTask [as invoke] (zone.js:525:1)
I have tried to use the method as a parent and child method but it doesn't work. How can I use the component method into the injected page? Can someone point me in the right direction?
Jsfiddle: https://jsfiddle.net/920cagns/

ionic-framework

来源：https://stackoverflow.com/questions/72425821/srolltotop-method-doesnt-work-with-a-component-in-ionic-6-angular

2条答案

按热度按时间

pgky5nke1#

你不能从fabbutton（子元素）访问元素内容（在本例中是父元素）。你必须向fabbutton添加一个EventEmitter，然后从主页滚动。ts
fabbutton.component.ts

...
export class FabbuttonComponent {

  @Output('onClick') onClick = new EventEmitter();

  scrollToTop() {
    this.onClick.emit() ;
  }

}

Home.html

...
<app-fabbutton (onClick)="scrollToTop()"></app-fabbutton>
...

Home.ts

...
@ViewChild(IonContent, { static: false }) content: IonContent;

scrollToTop() {
    this.content.scrollToTop(1500);
}
...

赞(0）回复(0）举报 2022-12-09

carvr3hs2#

我已经在fabbutton.component.html上添加了scrollToTop（）方法，如下所示：

<div class="fixed">
  <ion-fab (click)="scrollToTop()" vertical="bottom" horizontal="end" edge slot="fixed">
    <ion-fab-button class="toolbar-color" size="small">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</div>

经过测试，它的工作就像一个魅力！

赞(0）回复(0）举报 2022-12-09

我来回答

SrollToTop方法不适用于Ionic 6/Angular中的组件

2条答案

相关问题

热门标签

最新问答