Angular2 中的面板手风琴

Question

我正在尝试在 Angular 2.0.0-beta.15 中使用手风琴或面板，但是当我试图让它工作时，我有以下消息 "Property 'ngOnDestroy' is missing in type 'NgbAccordionGroup"

import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component, OnDestroy} from '@angular/core';

@Component({
  selector: 'ngb-accordion,[ngb-accordion]',
  inputs: ['onlyOneOpen: closeOthers'],
  template: `<ng-content></ng-content>`
})
export class NgbAccordion {
  private onlyOneOpen: boolean;
  private groups: Array<NgbAccordionGroup> = [];

  addGroup(group: NgbAccordionGroup): void { this.groups.push(group); }

  closeOthers(openGroup): void {
    if (!this.onlyOneOpen) {
      return;
    }

    this.groups.forEach((group: NgbAccordionGroup) => {
      if (group !== openGroup) {
        group.isOpen = false;
      }
    });
  }

  removeGroup(group: NgbAccordionGroup): void {
    const index = this.groups.indexOf(group);
    if (index !== -1) {
      this.groups.splice(index, 1);
    }
  }
}

@Component({
  selector: 'ngb-accordion-group,[ngb-accordion-group]', 
  inputs: ['heading', 'isOpen', 'isDisabled'],
  template: `
    <div class="card">
      <div class="card-header">
        <a href tabindex="0"><span [class.text-muted]="isDisabled" (click)="toggleOpen($event)">{{heading}}</span></a>
      </div>
      <div class="card-block" [hidden]="!isOpen">
        <div class="card-text">
            <ng-content></ng-content>
        </div>
      </div>
    </div>
  `
})
export class NgbAccordionGroup implements OnDestroy {
  private isDisabled: boolean;
  private _isOpen: boolean = false;

  constructor(private accordion: NgbAccordion) { this.accordion.addGroup(this); }

  toggleOpen(event) {
    event.preventDefault();
    if (!this.isDisabled) {
      this.isOpen = !this.isOpen;
    }
  }

  onDestroy(): void { this.accordion.removeGroup(this); }

  public get isOpen(): boolean { return this._isOpen; }

  public set isOpen(value: boolean) {
    this._isOpen = value;
    if (value) {
      this.accordion.closeOthers(this);
    }
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html'
  directives: [NgbAccordion, NgbAccordionGroup]
})
export class App {
  firstDisabled:boolean = false;
  isOpen:boolean = false;

}

bootstrap(App, []).catch(err => console.error(err));

或者看这里http://plnkr.co/edit/we3EsK?p=preview 现在正在 RC1 中工作，但我必须回到 Angular 2.0.0-beta.15

有什么想法吗？

Answer 1

onDestroy(): void { this.accordion.removeGroup(this); }

应该是

ngOnDestroy(): void { this.accordion.removeGroup(this); }

错误信息来自

... implements OnDestroy {

没有实际实现其成员。

Angular2 中的面板手风琴

Panel Accordion in Angular2

angular2-template

angular2-components

angular