[TOC] ## 空白屏幕 > 我的应用中没有错误。为什么显示空白屏幕？ 这可能会发生几种不同的原因。如果您无法在[Ionic论坛](https://forum.ionicframework.com/)上找到解决方案，请确保： * 根`@Component`有一个`template`或`templateUrl`。 * 根`@Component`模板具有`<ion-nav>`以下`root`属性： ~~~ <ion-nav [root]="rootPage"></ion-nav> ~~~ ## 指令不起作用 > 为什么我的自定义组件/指令不起作用？ 您可以检查一些事项。确保： * 您将其包含在要使用它的`directives`数组`@Component`中（仅当您的离子角度版本低于RC0时）。 * 你的选择器没有任何拼写错误。 * 您正确地将选择器用作属性，元素或类。 * 您的选择器具有[正确的语法](http://learnangular2.com/components/)： * `[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> ~~~ ## 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); } } ~~~