Question

一个角度应用程序中有多个页面，这些页面大致相同，但几乎没有细微差别。假设它们都有一个表格，if上方有几个不同的按钮（具有与它们相关的特定功能），等等。

解决这个问题的本能是让一个组件包含所有通用功能，提取组件外部的差异，然后使用内容投影将其注入视图中。

今天，我看到了以下解决方案，该解决方案感觉有点不对劲，并且由于某种原因使我有点紧张：

一个抽象的PageComponent类，没有组件装饰器，只是其中的常见功能，带有page-component.html，在 n 中被用作templateUrl扩展了PageComponent类。

除了将单个html文件用作多个组件中的templateUrl之外，这与我要做的几乎相同。

因为“这感觉不对”实际上并不是我可以反对的论点，所以我的问题是，您是否见过在角度应用中使用过这种方法。您知道它附带的任何缺点/后果吗？

Answer 1

我有同样的思维方式，我要告诉你我为表所做的事情，然后在此基础上建立解决方案。

首先让我们收集关于mat-table的需求；

对象列表作为数据
要显示的列列表

让我们从数据开始

我将声明一个名为matTableDataSource的变量以供表使用，而不是传递一个dataSource的变量，并声明一个具有list的设置函数的输入，以将用户列表分配给{ {1}}：

dataSource

对于列（以我为例），我总是需要一个索引列来进行编号，并为行按钮使用选项列；所以我只传递其他列：

我将为该表声明一个名为dataSource = new MatTableDataSource(); @Input() set list(value: Object[]) { if(!value) return; this.dataSource = new MatTableDataSource(value); // here you can reassign matSort and matPaginator of the dataSource }的变量，并为该变量声明一个名为displayedColumns的变量，并使用一个名为userColumns的输入：

ngFor

顺便说一句；我假设每个列都代表数据元素中的一个属性，例如：如果我传递了一个名为columns的列，那么该列的值将为displayedColumns: string[] = []; userColumns: string[] = []; @Input() set columns(value: string[]) { if(!value) return; this.userColumns = value; // assign index as first column and options as last one this.displayedColumns.push('index', ...value, 'options'); }；但是您可以通过传递类似以下内容的对象列表来使其更好：

name

和在列设置器中使用：

element.name

行按钮呢？我们如何使其动态化？

您可以将ng-container用于此目的；因此，您将期望父组件传递模板，并将行作为变量传递，例如：

{
    colHeader: 'EmployeeName',
    colValue: 'name'
}

然后在父组件中传递按钮，如：

let headers = value.map(col => col.colHeader);
this.displayedColumns.push('index', ...headers, 'options');

我希望您在上面的链接中了解到ngContainer，以避免出错。

您可以增强这种方式，但是我给您一个一般的想法。

我试图提供帮助，祝您愉快。

Angular中多个组件的单个html模板

1 个答案: