【问题标题】:Panel Accordion in Angular2Angular2中的面板手风琴
【发布时间】:2016-06-07 03:04:53
【问题描述】:

我正在尝试在 Angular 2.0.0-beta.15 中使用手风琴或面板,但是当我尝试使其工作时,我收到以下消息“缺少属性 'ngOnDestroy'在类型“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

有什么想法吗?

【问题讨论】:

    标签: angular angular2-template angular2-components


    【解决方案1】:
    onDestroy(): void { this.accordion.removeGroup(this); }
    

    应该是

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

    错误信息来自于

    ... implements OnDestroy {
    

    没有实际实现其成员。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-07-07
      • 2014-02-18
      • 2013-02-06
      • 1970-01-01
      • 1970-01-01
      • 2016-08-10
      • 2013-05-19
      相关资源
      最近更新 更多