angular6: я хочу, чтобы у моего унаследованного компонента были некоторые свойства родительского

Question

У меня есть таблица, в которой каждая ячейка таблицы представляет собой отдельный экземпляр компонента. В зависимости от данных (дата, текст, ссылки) я использую разные компоненты.

Поскольку у этих компонентов много общего, я представил TableCellMasterComponent, который расширяется всеми другими типами табличных ячеек.

Все мои компоненты имеют одинаковое свойство хоста:

@Component({
  selector: 'td[app-text-col]',
  templateUrl: './text-col.component.html',
  styleUrls: ['./text-col.component.css'],
  host: {
    "[hidden]": "col.deactivated"
  },
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}

Можно ли как-то переместить это в TableCellMasterComponent?

Также я хотел бы дать им всем контекстное меню. Но, как я понимаю, невозможно добавить HTML в Мастер. Это правда?

Могу ли я переместить changeDetection в Master?

Answer 1

Я также создал Stackblitz , который решает их только так, как я знаю. Благодарим AlesD за решение вашей первой проблемы. Все, что вам нужно для решения этой проблемы, это добавить @Input() к видимости, которой вы управляете в родительском элементе.

Ваша проблема с контекстным меню менее проста. Один вариант, который я быстро попытался показать в моем стеке, используя ngx-contextmenu , сделан с использованием вложенных компонентов. Здесь есть хороший учебник

Как вы обнаружили, вы должны выбирать между использованием extends или использованием вложенного компонента. В моем примере я использую оба, но в большинстве случаев имеет смысл использовать одно или другое в зависимости от:

• Если ваши контекстные меню отличаются и избыточность не так уж и велика, используйте расширенные возможности и создайте контекстное меню вручную для каждого компонента
• если контекстные меню все будут одинаковыми, я бы полностью отбросил расширения и использовал бы вложенный компонент. Вы можете получить доступ к вложенному компоненту, используя @ViewChild, чтобы получить доступ к необходимым атрибутам.
• Использование обоих (как в моем примере) использовалось в основном для демонстрации, поскольку я не понимаю весь контекст вашего приложения, но если вы можете абстрагировать свои ячейки для использования общего интерфейса или класса, вы можете передать их в contextMenu , ограничивая количество входов, это может иметь смысл для вас.

Answer 2

Метаданные декоратора @Component не наследуются, поэтому некоторые вещи нельзя переместить в базовый класс. @Input и @Output свойства наследуются.

Существует решение для свойства хоста, которое вы можете использовать вместо @HostBinding, и оно будет унаследовано. Например, ваше связывание вы можете сделать так:

@HostBinding('hidden') get hidden(): boolean { return col.deactivated; }