使用@ViewChild裝飾器，我抓取ion-input元素以使用該setFocus()方法設定焦點。這按預期作業。我不知道為什么，但我無法弄清楚為什么組件的所有 Jasmine 單元測驗都失敗了。我試過嘲笑這個setFocus()方法，但沒有成功。任何人都可以幫助我并知道我做錯了什么嗎？
帶@ViewChild參考的模板#input_username
<ion-input id="inputusername"
#input_username
color="dark"
role="textbox"
aria-label=""
placeholder=""
type="text"
formControlName="name"
ngDefaultControl>
</ion-input>
設定焦點的組件方法 setFocus()
private _setFocusDefaultInput(input: ElementRef): void {
const ionInput = input['el']; // get the DOM element from Ionic
ionInput.setFocus();
}
該_setFocusDefaultInput()方法被稱為內部ngAfterViewInit()方法
ngAfterViewInit(): void {
setTimeout(() => {
this._setFocusDefaultInput(this.inputUsername);
}, 800);
}
運行屬于該組件的所有 Jasmine 單元測驗時收到的錯誤訊息：
Failed: input.setFocus is not a function
error properties: Object({ longStack: 'TypeError: input.setFocus is not a function
at LoginPage._setFocusDefaultInput (src/app/login/login/login.page.ts:123:11)
at src/app/login/login/login.page.ts:54:12
at ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:429:1)
at AsyncTestZoneSpec.onInvokeTask (node_modules/zone.js/dist/zone-testing.js:1231:33)
at ProxyZoneSpec.onInvokeTask (node_modules/zone.js/dist/zone-testing.js:328:43)
at ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:428:1)
at Object.onInvokeTask (node_modules/zone.js/dist/zone.js:307:88)
at ZoneDelegate.invokeTask (nod ...
TypeError: input.setFocus is not a function
我嘗試setFocus()使用以下代碼模擬該方法，但沒有成功
測驗床配置
{
provide: ElementRef,
useClass: ElementRefMock
},
{
provide: IonInput,
useClass: IonInputMock
}
模擬類
class ElementRefMock {
setFocus(){}
el: {
setFocus: () => {}
};
}
class IonInputMock {
setFocus(){}
el: {
setFocus: () => {}
};
uj5u.com熱心網友回復：
我認為每個單獨的測驗運行速度都比 800 毫秒的超時要快，因此輸入的視圖會被破壞，但您仍然想在大約 800 毫秒后參考它。假設測驗用了 200 毫秒，焦點邏輯運行了 600 毫秒，但在 200 毫秒內視圖已被破壞，我們指的是不存在的東西。
試試這個來除錯：
private _setFocusDefaultInput(input: ElementRef): void {
const ionInput = input['el']; // get the DOM element from Ionic
// See what you get for the ionInput
console.log(ionInput);
// If ionInput is undefined, put a question mark between the . and setFocus
// This way, it won't run if ionInput is undefined or null
// You can of course put an if check as well.
ionInput?.setFocus();
}
uj5u.com熱心網友回復：
上一個答案解決了我的問題，但我找到了一個新的解決方案，它不再需要 setTimeout 方法在 Ionic 輸入欄位上正確設定焦點。我遇到的 Jasmine 單元測驗問題也已通過此實作解決
我把
ElementRef介面換成了IonInput直接呼叫的介面setFocus()：@ViewChild('input_username') inputUsername: IonInput;我實作了
ionViewDidEnter()Ionic 生命周期方法。直到所有 Ionic 元素都成功渲染到 DOM 中時才會呼叫此方法。那時我想將焦點設定在 Ionic 輸入欄位上：ionViewDidEnter(): void { this.inputUsername.setFocus(); }
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370254.html
上一篇：如何使用TypeScript在靜態JSON物件上添加條件
下一篇：使用Rxjs在頁面重繪時保留資料