类“ ModalDirective”错误地实现了接口“ AfterViewInit”

Question

I'm trying to add a modal to my project, so I found this library : ng2-bootstrap

I installed it first using the command : npm install ng2-bootstrap --save

My Class looks like :

import { Directive, ElementRef, Input, Renderer, AfterViewInit, OnDestroy } from 
@angular/core';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';

@Directive({
  selector: '[bsModal]',
  exportAs: 'bs-modal'
})
export class ModalDirective implements AfterViewInit, OnDestroy {
  @Input()
  public set config(conf:ModalOptions) {
    this._config = this.getConfig(conf);
  };

  @Output() public onShow:EventEmitter<ModalDirective> = new EventEmitter();
  @Output() public onShown:EventEmitter<ModalDirective> = new EventEmitter();
  @Output() public onHide:EventEmitter<ModalDirective> = new EventEmitter();
  @Output() public onHidden:EventEmitter<ModalDirective> = new EventEmitter();

}

But I got this Error :

class 'ModalDirective' incorrectly implements interface 'AfterViewInit'

Answer 1

If you use implements AfterViewInit, OnDestroy , then you need to implement the interface methods

export class ModalDirective implements AfterViewInit, OnDestroy {

  ngAfterViewInit() {
  }

  ngOnDestroy() {
  }
}

If you don't need to do anything in these lifecycle hooks, then just remove the implements AfterViewInit, OnDestroy

See Also:

• Lifecycle Hooks

Answer 2

I found in ng2-bootstrap documentation.

I think you need to add in your component like this:

import { Component, ViewChild } from '@angular/core';

    // todo: change to ng2-bootstrap
    import { ModalDirective } from '../../../components/modal/modal.component';
    @Component({
      selector: 'modal-demo',
      template: template
    })
    export class ModalDemoComponent {
      @ViewChild('childModal') public childModal:ModalDirective;

      public showChildModal():void {
        this.childModal.show();
      }

      public hideChildModal():void {
        this.childModal.hide();
      }
    }

Answer 3

If you use implements OnInit , OnDestroy methods then you should implement its interface

export class ModalDirective implements OnInit, OnDestroy {

  ngOnInit() {
  }

  ngOnDestroy() {
  }
}