Question

从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)

Answer 1

函数式编程不是很好吗？

您必须采用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;
}

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

Difference between abstraction and encapsulation?

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

1 个答案: