Как включить директиву в пользовательский компонент, который расширяет другой

Question

Я пытаюсь по существу объединить компонент и директиву с некоторыми параметрами по умолчанию в новый пользовательский компонент.

Изначально это выглядело бы так:

<input soho-input soho-mask [options]="maskOptions"...

и я хочу расширить компонент soho-input, создав новый компонент с именем integer-input, который также включает директиву soho-mask и параметры по умолчанию, так что он будет выглядеть примерно так:

<input integer-input...

То, что у меня есть в данный момент, таково, но я не могу понять, как заставить его работать, и теперь я совершенно потерян и не могу найти другие подобные посты.

import { Component, ElementRef, OnInit, Inject, ViewChild } from '@angular/core';
import { SohoInputComponent, SohoMaskDirective, SohoMaskModule } from '../../../node_modules/ids-enterprise-ng';

@Component({
  selector:  'input[integer-input]', // tslint:disable-line
  template:  '<ng-content></ng-content>'
})
export class IntegerInputComponent extends SohoInputComponent implements OnInit {
  mask: SohoMaskDirective;

  private _patternOptions: SohoMaskPatternOptions = {
    allowDecimal: false,
    allowNegative: false,
    allowThousandsSeparator: false,
    integerLimit: 10
  };

  private _options: SohoMaskOptions = {
    process: 'number',
    patternOptions: this._patternOptions
  };

  constructor(@Inject(ElementRef) element: ElementRef) {
    super(element);
  }

  ngOnInit() {
    this.mask.options = this._options;
  }
}