角度 6：我希望我继承的组件具有父组件的一些属性

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？

我也很想给他们所有人一个上下文菜单。但正如我所见，在 Master 中添加 HTML 是不可能的。这是真的吗？

我可以将 changeDetection 移到 Master 上吗？

Answer 1

@Component 装饰器元数据不会被继承，因此您无法将某些内容移至基类。 @Input 和 @Output 属性被继承。

主机属性有一个解决方案，您可以改用@HostBinding，这将被继承。例如你的绑定你可以这样做：

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

Answer 2

我还创建了一个Stackblitz，这是我知道的唯一方法解决它们。感谢 AlesD 解决了您的第一个问题，解决问题所需要做的就是将 @Input() 添加到您在父元素中控制的可见性中。

上下文菜单的问题不那么简单。我很快尝试使用ngx-contextmenu 在我的stackblitz 中展示的一个选项是使用嵌套组件完成的。有一个很好的教程here

正如您所发现的，您必须在使用扩展或使用嵌套组件之间做出选择。在我的示例中，我同时使用了这两种方法，但根据情况使用其中一种可能更有意义：

• 如果您的上下文菜单不同并且冗余不是什么大问题，请使用扩展，并在每个组件上手动构建上下文菜单
• 如果上下文菜单都相同，我会完全放弃扩展并使用嵌套组件。您可以使用 @ViewChild 访问嵌套组件以访问您需要的属性。
• 同时使用两者（如在我的示例中）主要用于演示，因为我不了解您的应用程序的整个上下文，但如果您可以将单元格抽象为使用通用接口或类，您可以传递给 contextMenu ，限制输入的数量，这可能对你有意义。