Как использовать пользовательскую директиву на элементе хоста пользовательского компонента

Question

У меня есть специальная директива, которая должна слушать ngModelChange пользовательского компонента и добавлять или удалять элементы в массиве.

Вот директива:

@Directive({
  selector: '[selectedItems]'
})

export class SelectedItemsDirective {
  @Input('ngModel') ngModel: boolean;
  @Input() mainNgModel: boolean;
  @Input() items: any[] = [];
  @Input() item: any;
  @Input() itemKey: string;
  @Output() itemsChange: EventEmitter<any> = new EventEmitter<any>();

  @HostListener('ngModelChange')
  modelChange() {

    const i: number = this.items.indexOf(this.item[this.itemKey]);

    if (i === -1 && this.ngModel) {
      this.items.push();
    }
    else {
      this.items.splice(i, 1);
    }

    this.itemsChange.emit(this.items);
  }
}

И тогда это будет использоваться так:

<checkbox [(ngModel)]="event.isChecked" [(selectedItems)]="selectedEvents" [items]="events" [item]="event"></checkbox>

Но это не работает, потому что:

Can't bind to 'selectedItems' since it isn't a known property of 'checkbox'.

И я предполагаю, что то же самое будет происходить и со свойствами ввода директивы.

Я не могу найти свой путь к решению, которое отдаленно близко к тому, чего я пытаюсь достичь. Я объявил и экспортировал директиву в SharedModule который я затем импортировал в модуль флажка.

Что еще мне нужно сделать, чтобы это сработало?

Answer 1

Я полагаю, вы забыли подать заявку directives на ваш @Component(),

Пример:

@Component({
    selector: 'YourApp',
    templateUrl: 'YourTemplateUrlHere',
    directives: [SelectedItemsDirective] 
})

И еще одно предложение: не пишите весь код, просто начните с привязки директивы, а затем добавьте очень простой console.log() Затем добавьте все эти двухсторонние привязки по одному.

Потратил три часа на отладку только из-за орфографической ошибки в директиве. Ура опыт:)