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 ，限制输入的数量，这可能对您有意义。

angular6：我希望继承的组件具有父级的某些属性

2 个答案: