我制作了一個 fabbutton，因此用戶可以一鍵滾動到頂部。我已經在沒有組件的情況下對此進行了測驗，并且作業正常。現在我想將此 fabbutton 用作組件，因為我想在多個頁面中使用它。
這是我的組件設定：
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>
我使用自定義 css 類使其在用戶滾動時保持不變
fabbutton.component.scss
.fixed {
position: fixed;
bottom: 30px;
right: 0;
}
為什么 ion-fab-button 不能固定在 ionic 4 popover 內？
這作業正常。
現在我有方法在 ts 檔案中滾動到頂部。
fabbutton.component.ts
export class FabbuttonComponent {
@ViewChild(IonContent, { static: false }) content: IonContent;
scrollToTop() {
this.content.scrollToTop(1500);
}
}
我在主頁中使用這樣的選擇器。
主頁.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>
我還將組件注入到 home.module 檔案中。
當我測驗應用程式時，我收到以下錯誤：
core.mjs:6494 錯誤型別錯誤：無法在 FabbuttonComponent_Template_ion_fab_button_click_2_listener (template.html:3:56) 在 executeListenerWithErrorHandling (core. mjs:15031:1) 在 HostElement 的 wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15069:1)。(platform-b??rowser.mjs:466:38) 在 _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:443:1) 在 Object.onInvokeTask (core.mjs:25595:1) 在 _ZoneDelegate.push.3484。 _ZoneDelegate.invokeTask (zone.js:442:1) 在 Zone.push.3484.Zone.runTask (zone.js:214:1) 在 ZoneTask.push.3484.ZoneTask.invokeTask [作為呼叫] (zone.js: 525:1)
我曾嘗試將該方法用作父子方法，但它不起作用。如何在注入頁面中使用組件方法？有人可以指出我正確的方向嗎？
jsfiddle：https ://jsfiddle.net/920cagns/
uj5u.com熱心網友回復：
您無法從 fabbutton （子元素）訪問離子內容（在本例中為父元素）。您必須將 EventEmitter 添加到 fabbutton 并從 home.ts 滾動
fabbutton.component.ts
...
export class FabbuttonComponent {
@Output('onClick') onClick = new EventEmitter();
scrollToTop() {
this.onClick.emit() ;
}
}
主頁.html
...
<app-fabbutton (onClick)="scrollToTop()"></app-fabbutton>
...
主頁.ts
...
@ViewChild(IonContent, { static: false }) content: IonContent;
scrollToTop() {
this.content.scrollToTop(1500);
}
...
uj5u.com熱心網友回復：
我在 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>
經過測驗，它就像一個魅力！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487826.html
標籤：javascript html 有角度的 打字稿 离子框架