如何解决无法绑定到“ bsConfig”,因为它不是“输入”的已知属性
我在组件中使用BsDatePicker和下拉列表,我决定将它们移到自定义组件中以使其可重用,但是在自定义组件模板中使用它时出现以下错误。在任何其他组件中,日期选择器都可以正常工作-仅当我将其放置在自定义组件中时。
error NG8002: Can't bind to 'bsConfig' since it isn't a known property of 'input'.
core.js:4081 ERROR Error: NodeInjector: NOT_FOUND [BsDatepickerDirective]
at getOrCreateInjectable (core.js:3819)
at Module.ɵɵdirectiveInject (core.js:13730)
at NodeInjectorFactory.DatePickerMomentModifierDirective_Factory [as factory] (date-picker-moment-modifier.directive.ts:11)
at getNodeInjectable (core.js:3913)
at instantiateAllDirectives (core.js:7973)
at createDirectivesInstances (core.js:7356)
at Module.ɵɵelementStart (core.js:13879)
at WgDateTimePickerComponent_Template (wg-datetimepicker.component.ts:19)
at executeTemplate (core.js:7329)
at renderView (core.js:7138)
这是我的自定义组件:
import { Component,OnInit,ElementRef } from '@angular/core';
import { ViewChild,Injector,Input,Output,EventEmitter,forwardRef } from '@angular/core';
import { ControlValueAccessor,NG_VALUE_ACCESSOR,NG_VALIDATORS } from '@angular/forms';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
@Component({
selector: 'wg-datetimepicker',template:
`<table>
<tr>
<td style="width:100px">
<input #DateTimePickerDatePart
[id]="id + 'Date'"
name="DateTimePickerDatePart"
type="date"
class="form-control"
autocomplete="off"
bsDatepicker
datePickerMomentModifier
[(date)]="selectedDate"
(dateChange)="onChange($event,selectedTime)"
[bsConfig]="{ adaptivePosition: true }"/>
</td>
<td style="width:100px">
<select #DateTimePickerTimePart
[id]="id + 'Time'"
name="DateTimePickerTimePart"
[class]="class"
[disabled]="isDisabled"
[(ngModel)]="selectedTime"
(change)="onChange(selectedDate,$event)"
[tabindex]="tindex">
<option *ngFor="let time of listOfTimes" [value]="time.id">
<span style="text-align: right; width: 200px;">{{time.text}}</span>
</option>
</select>
</td>
</tr>
</table>`,providers: [{
provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => WgDateTimePickerComponent),multi: true
},{
provide: NG_VALIDATORS,]
})
export class WgDateTimePickerComponent extends AppComponentBase implements ControlValueAccessor,OnInit { }
我正确导入了BsDatepickerModule和WgDateTimePickerComponent:
import { BsDatepickerConfig,BsDaterangepickerConfig,BsLocaleService } from 'ngx-bootstrap/datepicker';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { NgxBootstrapDatePickerConfigService } from 'assets/ngx-bootstrap/ngx-bootstrap-datepicker-config.service';
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales();
import { WgDateTimePickerComponent } from '@app/shared/common/components/wg-datetimepicker.component';
@NgModule({
imports: [
BsDatepickerModule.forRoot(),],declarations: [
WgDateTimePickerComponent
],exports: [
WgDateTimePickerComponent,providers: [
{ provide: BsDatepickerConfig,useFactory: NgxBootstrapDatePickerConfigService.getDatepickerConfig },]
})
不确定我缺少什么;任何帮助将不胜感激。
谢谢
Wg
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。