javascript - Angular 2 : Cannot read property 'then' of undefined for push notification

Question

我正在尝试在单击按钮时显示推送通知。

我陷入了一个 Angular promise 错误，它说:

Cannot read property 'then' of undefined

完整错误堆栈跟踪:

Uncaught Error: Error in ./AppComponent class AppComponent - inline template:17:2 caused by: Cannot read property 'then' of undefined

TypeError: Cannot read property 'then' of undefined at PushNotificationComponent.show (notification.component.js:42) at DebugAppView.View_AppComponent0.handleEvent_16 (/AppModule/AppComponent/component.ngfactory.js:129) at DebugAppView.eventHandler (view.js:664) at HTMLButtonElement.COMPONENT_REGEX (dom_renderer.js:489) at ZoneDelegate.invokeTask (zone.js:367) at Object.NgZone.forkInnerZoneWithAngularBehavior.inner.inner.fork.onInvokeTask (ng_zone.js:264) at ZoneDelegate.invokeTask (zone.js:366) at Zone.runTask (zone.js:166) at HTMLButtonElement.cancelFn.invoke (zone.js:420)

我正在使用 github 链接:

https://github.com/alexcastillo/ng2-notifications/blob/master/src/app/app.component.html

我的app.module.ts是这样的:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { PushNotificationComponent } from 'ng2-notifications/src/app/components/notification.component';

@NgModule({
   declarations: [
    AppComponent,
    PushNotificationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {
  Directive,
  EventEmitter,
  OnInit,
  OnChanges,
  OnDestroy,
  Input,
  Output
} from '@angular/core';

import '../style/app.scss';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
@Directive({
 selector: 'push-notification'
})
export class AppComponent {
  title: string = 'ng2-notifications';
  description: string = 'Angular 2 Component for Native Push Notifications';

  constructor() {
  }
}

app.component.html

<header>
    <h1 class="title">{{ title }}</h1>
</header>
<main>

    <h2>{{ description }}</h2>

    <img src="img/demo.gif">

    <push-notification #notification title="ng2-notifications" body="Native Push Notifications in Angular 2" icon="<some_ulr>" closeDelay="2000" (load)="notification.show()"> //Problem Here!!
    </push-notification>

    <button (click)="notification.show()">Show Notification</button>

</main>

如果我删除该行: (load)="notification.show() 看起来不错，但在单击按钮后没有通知，它没有任何作用!

Answer 1

错误在这里:

从app.component.ts中删除此代码块

@Directive({
 selector: 'push-notification'
})

注意:

https://github.com/alexcastillo/ng2-notifications is coded with beta version of angular, so find the newer version or different plugin.

Given Doc is also regarding to the beta version of angular