类的ModalDirective“正确实现了接口“AfterViewInit”

Question

我想一个模式添加到我的项目，所以我发现这个库：ng2-bootstrap

我安装了它首先使用命令：npm install ng2-bootstrap --save

我类的样子：

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(); 

} 

但我得到这个错误：

class 'ModalDirective' incorrectly implements interface 'AfterViewInit'

Answer 1

如果使用implements AfterViewInit, OnDestroy，则需要实现接口方法

export class ModalDirective implements AfterViewInit, OnDestroy { 

    ngAfterViewInit() { 
    } 

    ngOnDestroy() { 
    } 
} 

如果您不需要这些生命周期钩子做任何事情，然后就取出implements AfterViewInit, OnDestroy

另请参见：

• Lifecycle Hooks

Answer 2

我在 ng2-bootstrap文档中找到。

我认为你需要在你的组件添加这样的：如果你使用工具的OnInit，的OnDestroy方法，那么你应该实现它的接口

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

export class ModalDirective implements OnInit, OnDestroy { 

    ngOnInit() { 
    } 

    ngOnDestroy() { 
    } 
}