Angular 5 不能 bootstrap select 指令不起作用

Question

我有一个 angular 5 项目，我想在我的组件视图中使用 bootstrap-select 插件。

我有一个指令。

@Directive({
// tslint:disable-next-line:directive-selector
selector: '[bootstrapSelect]',
exportAs: 'bootstrap-select'
})
export class BootstrapSelectDirective implements OnInit, OnDestroy {


private changedSubscription: Subscription;
private shownSubscription: Subscription;
private hiddenSubscription: Subscription;

@Input()
required: string;

@Input()
set ngModel(values: string | string[]) {
    setTimeout(() => this.selected = values);
}


@Output()
ngModelChange = new EventEmitter();

@Output()
shown = new EventEmitter();

@Output()
hidden = new EventEmitter();


constructor(private el: ElementRef) {
    // tslint:disable-next-line:max-line-length
    this.changedSubscription = Observable.fromEvent($(this.el.nativeElement), 'changed.bs.select').subscribe((e: any) => setTimeout(() => this.ngModelChange.emit(this.selected)));
    // tslint:disable-next-line:max-line-length
    this.shownSubscription = Observable.fromEvent($(this.el.nativeElement), 'shown.bs.select').subscribe((e: any) => setTimeout(() => this.shown.emit()));
    // tslint:disable-next-line:max-line-length
    this.hiddenSubscription = Observable.fromEvent($(this.el.nativeElement), 'hidden.bs.select').subscribe((e: any) => setTimeout(() => this.hidden.emit()));
}



ngOnInit() {
    $(this.el.nativeElement).selectpicker();

    if (this.requiredAttribute) {
        $(this.el.nativeElement).selectpicker('setStyle', 'required', 'add');
    }

    setTimeout(() => {
        this.refresh();
        this.doValidation();
    });

}


ngOnDestroy() {
    if (this.changedSubscription) {
        this.changedSubscription.unsubscribe();
    }

    if (this.shownSubscription) {
        this.shownSubscription.unsubscribe();
    }

    if (this.hiddenSubscription) {
        this.hiddenSubscription.unsubscribe();
    }

    $(this.el.nativeElement).selectpicker('destroy');
}

我在一个简单的页面中使用它。

<div class="form-group">
    <label for="homePage" class="col-sm-3 control-label">{{'preferences.HomePage' | translate}} </label>
    <div class="col-sm-4">
        <select id="homePage" [(ngModel)]="configurations.homeUrl" #homePageSelector="bootstrap-select" bootstrapSelect class="selectpicker form-control">
            <option data-icon="fa fa-tachometer" data-subtext="(Default)" value="/">{{'preferences.Dashboard' | translate}}</option>
            <option data-icon="fa fa-cog" value="/settings">{{'preferences.Settings' | translate}}</option>
        </select>
    </div>
    <div class="col-sm-5">
        <p class="form-control-static text-muted small">{{'preferences.HomePageHint' | translate}}</p>
    </div>
</div>

但是当我尝试在 form 中使用指令时，我得到了那个错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:There is no directive with "exportAs" set to "bootstrap-select" ("-lg-9 col-md-9"> <select class="form-control selectpicker" [ERROR ->]#classRoomTypeIdSelector="bootstrap-select" bootstrapSelect name="classRoomTypeId" [(ngModel)]="class")

这是我尝试使用该指令的代码。

<div class="form-group">
                            <div class="col-lg-6">
                                <label class="col-lg-3 col-md-3 control-label">Tipo</label>
                                <div class="col-lg-9 col-md-9">
                                    <select class="form-control selectpicker" #classRoomTypeIdSelector="bootstrap-select" bootstrapSelect name="classRoomTypeId" [(ngModel)]="classroomModel.classRoomTypeId" formControlName="classRoomTypeId">
                                        <option *ngFor="let option of classroomTypes" [value]="option.id">{{option.name}}</option>
                                    </select>
                                    <ul class="text-danger list-unstyled" *ngIf="classroomForm.controls['classRoomTypeId'].touched && classroomForm.controls['classRoomTypeId'].invalid">
                                        <li *ngIf="classroomForm.controls['classRoomTypeId'].errors.required">
                                            El tipo del aula es requerido
                                        </li>
                                    </ul>
                                </div>
                            </div>

知道为什么我可以在一个地方使用该指令而另一个地方不能吗？

Answer 1

您还需要将该指令添加到您使用它的模块的 declarations 中，以使其对该模块的组件可见

@NgModule({ 
   ...
   declarations: [ BootstrapSelectDirective ]
   ...
})
export class ThatModule { }

Angular 5 不能 bootstrap select 指令不起作用

Angular 5 can't bootstrap select directive it's not working

angular

angular-directive

bootstrap-select