时间戳

首页 > 解决方案 > 如何围绕仅重命名组件选择器的 Angular 组件创建包装器？

angular - 如何围绕仅重命名组件选择器的 Angular 组件创建包装器？

问题描述

来自 React 背景，您可以通过重命名来抽象出应用程序中的库组件，如下所示：

const MyAppTable = (props) => <LibraryTable ...props />;

我想在 Angular 中做类似的事情，但不确定如何获得组件行为的 1:1 映射。例如，我想这样做：

<my-app-table [input]="input" ></my-app-table>

是相同的

<library-table [input]="input" ></library-table> (plus all additional behavior found in component)

标签： angularreactjstypescript

解决方案

函数式编程不是很棒吗？

您必须使用 Angular 采用面向对象的方式。您可以扩展组件类并仅更新要更改的组件元数据。

@Component({selector: 'my-app-table'})
export class MyAppTableComponent extends LibraryTableComponent { 
     constructor() {
        super()
     }
}

您必须匹配基类的构造函数参数。否则 Angular 不知道依赖注入是什么。

这在面向对象编程中有点反模式。如果基类更新到新版本，除非您更新派生类，否则可能会破坏功能。

所以首选的方法称为封装。这基本上意味着环绕另一个组件，但这并不容易。

@Component({
    selector: 'my-app-table',
    template: `<library-table [input]="input"></library-table>`
})
export class MyAppTableComponent {
    @Input() input: any;
}

以上需要更多的工作，但从代码的角度来看更安全。

抽象和封装的区别？

推荐阅读