跳至主要內容
版本：v8

執行階段問題

空白應用程式​

注意

我的應用程式沒有錯誤。為什麼會顯示空白畫面？

這可能有多種不同的原因。如果您在 Ionic 論壇上找不到解決方案，請確保

  • 未包含較舊瀏覽器/Android 版本的 Polyfill

對於 @angular/cli@7.3 或更高版本的專案，將會自動包含 polyfill。對於之前建立的專案，需要手動啟用 polyfill。

在 src/polyfills.ts 中，您必須為 Android 4.4 支援啟用所有 ES6 polyfill。

或者，可以更新專案以使用最新版本的 @angular/cli 套件和 @angular-devkit 套件，並在 angular.json 的 build 選項物件中包含 es5BrowserSupport 選項

        "input": "src/global.scss"
      }
    ],
-   "scripts": []
+   "scripts": [],
+   "es5BrowserSupport": true
  },
  "configurations": {
    "production": {

這會自動包含需要它們的較舊瀏覽器的 polyfill。

指令無法運作​

注意

為什麼我的自訂元件/指令無法運作？

您可以檢查一些事項。請確保

  • 您的選取器沒有任何拼字錯誤。
  • 您以屬性、元素或類別的形式正確使用選取器。
  • 您的選取器具有正確的語法
    • [attr] 如果它是屬性選取器
    • element 如果它是元素選取器
    • .class 如果它是類別選取器

以下是使用屬性選取器的範例

@Directive({
  selector: '[my-dir]' // <-- [my-dir] because it is an attribute
})                     // Could be my-dir, [my-dir], .my-dir
class MyDir {
  constructor() {
    console.log('I'm alive!');
  }
}

@Component({
  // We add my-dir as an attribute to match the directive's selector
  template: `<div my-dir>Hello World</div>`,

  // Alternatively, if you were attaching the directive to an element it would be:
  // template: `<my-dir>Hello World</my-dir>`
  // and if you were attaching by class the template would be:
  // template: `<div class="my-dir">Hello World</div>`

  directives: [MyDir] // <-- Don't forget me! (only if your ionic-angular version is below RC0)
})
class MyPage { }

點擊延遲​

注意

為什麼我的點擊事件會延遲？

一般而言，我們建議僅將 (click) 事件新增至通常可點擊的元素。這包括 <button> 和 <a> 元素。這可以改善輔助功能，因為螢幕閱讀器將能夠判斷該元素是否可點擊。

但是，您可能需要將 (click) 事件新增至通常不可點擊的元素。當您執行此操作時，您可能會在點擊元素到事件觸發之間體驗到 300ms 的延遲。若要移除此延遲，您可以將 tappable 屬性新增至您的元素。

<div tappable (click)="doClick()">I am clickable!</div>

Angular 變更偵測​

注意

為什麼我的元件在初始化時，Angular 變更偵測會非常頻繁地執行？

Angular 使用一個名為 zone.js 的程式庫，這有助於判斷何時執行變更偵測。

從 zone.js 0.8.27 開始，Web 元件的某些 API 也會導致執行變更偵測。當初始化大量元件時，這可能會產生應用程式速度變慢的不良副作用。

為了避免這種情況發生，可以停用管理變更偵測這一部分的 zone.js 旗標。在您應用程式的 src 目錄中，建立一個名為 zone-flags.ts 的檔案。將以下程式碼放入檔案中

(window as any).__Zone_disable_customElements = true;

然後需要將 zone-flags.ts 檔案匯入您應用程式的 polyfills.ts 檔案中。請務必在匯入 zone.js 之前 匯入它

...

import './zone-flags.ts';
import 'zone.js/dist/zone'; // Included with Angular CLI

...

此變更只會影響依賴 zone.js 0.8.27 或更新版本的應用程式。較舊版本將不會受到此變更的影響。

注意

透過以下方式建立 Ionic 應用程式時，會自動包含此旗標

Ionic CLI。

Cordova 外掛程式在瀏覽器中無法運作​

在開發的某個階段，您可能會嘗試呼叫 Cordova 外掛程式，但收到警告

[Warning] Native: tried calling StatusBar.styleDefault, but Cordova is not
available. Make sure to include cordova.js or run in a device/simulator
(app.bundle.js, line 83388)

當您嘗試呼叫原生外掛程式，但 Cordova 無法使用時，就會發生這種情況。幸運的是，Ionic Native 會列印出友善的警告，而不是錯誤。

在其他外掛程式未使用 Ionic Native 的情況下，外掛程式可能會列印出更模糊的警告。

EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
(evaluating 'navigator.camera.getPicture')

如果發生這種情況，請在真實裝置或模擬器上測試外掛程式。

提供者的多個實例​

如果您在每個元件中注入提供者，因為您希望它對所有元件都可用，那麼您最終會得到提供者的多個實例。如果您希望提供者對子元件可用，您應該在父元件中注入一次提供者。

let id = 0;
export class MyService {
  id: number;

  constructor() {
    this.id = id++;
  }
}

@Component({
  selector: 'my-component',
  template: 'Hello World',
  providers: [MyService], // <-- Creates a new instance of MyService :(
}) // Unnecessary because MyService is in App's providers
class MyComp {
  // id is 1, s is a different MyService instance than MyApp
  constructor(s: MyService) {
    console.log('MyService id is: ' + s.id);
  }
}

@Component({
  template: '<my-component></my-component>',
  providers: [MyService], // MyService only needs to be here
  directives: [MyComp],
})
class MyApp {
  // id is 0
  constructor(s: MyService) {
    console.log('MyService id is: ' + s.id);
  }
}

在函式回呼中存取 this 會傳回 undefined​

某些元件，例如 ion-input 上的 counterFormatter 和 ion-range 上的 pinFormatter，允許開發人員傳遞回呼。如果您打算從回呼的內容中存取 this，請務必繫結正確的 this 值。當您使用 Angular 元件或在 React 中使用類別元件時，您可能需要存取 this。有兩種繫結 this 的方法

繫結 this 的第一種方法是使用函式實例上的 bind() 方法。如果您想要傳遞一個名為 counterFormatterFn 的回呼，那麼您會寫入 counterFormatterFn.bind(this)。

繫結 this 的第二種方法是在定義回呼時使用箭頭函式。之所以有效，是因為 JavaScript 不會為箭頭函式建立新的 this 繫結。

請參閱其 MDN 頁面，以取得有關 this 在 JavaScript 中如何運作的詳細資訊。

目錄

編輯此頁面