Angular 2：无法读取推送通知未定义的属性“then”

Question

我试图在按钮点击时显示推送通知。

我遇到了一个角度承诺错误，上面写着：

无法读取未定义的属性“then”

完整的错误堆栈跟踪：

未捕获的错误：./AppComponent 类 AppComponent 中的错误 - 内联模板：17:2 原因：无法读取未定义的属性“then”

TypeError：无法读取未定义的属性“then” 在 PushNotificationComponent.show (notification.component.js:42) 在 DebugAppView.View_AppComponent0.handleEvent_16 (/AppModule/AppComponent/component.ngfactory.js:129) 在 DebugAppView.eventHandler (view.js:664) 在 HTMLButtonElement.COMPONENT_REGEX (dom_renderer.js:489) 在 ZoneDelegate.invokeTask (zone.js:367) 在 Object.NgZone.forkInnerZoneWithAngularBehavior.inner.inner.fork.onInvokeTask (ng_zone.js:264) 在 ZoneDelegate.invokeTask (zone.js:366) 在 Zone.runTask (zone.js:166) 在 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 用 beta 编码 Angular 的版本，所以找到更新的版本或不同的插件。

Given Doc 也涉及 angular 的 beta 版本