Matable的MatcolumnDef和Matcelldef如何工作？

发布于 2025-02-09 09:47:20 字数 136 浏览 2 评论 0原文

我希望从现有的页面中构建可重复使用的表组件。我很天真地期望Angular具有像示例插槽，插槽道具一样的Vuejs。但是我找不到其他解决方案。

然后我遇到了Mat-table的例子。

我想知道我可以构建如此灵活的组件来构建桌子吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野侃 2025-02-16 09:47:20

我找到了解决方案。我是Angular的新手，我不愿使用“复杂”内置组件。

原来，您可以使用Vuejs的示波器（例如功能）来创建组件。

在表HTML页面中，您定义：

 ＆lt; table＆gt;
  ＆lt; tr＆gt;
    ＆lt; th *ngfor =“让列的属性| keyValue”＆gt;
      ＆lt; ng-container
         [ngtemplateoutlet] =“ columnheader”
         [ngtemplateoutcontext] =“ {field：property.key，text：property.value}”
      ＆gt;＆lt;/ng-container＆gt;
    ＆lt;/th＆gt;
  ＆lt;/tr＆gt;
  ＆lt; tr *ngfor =“ let data of datas＆gt; gt;
    ＆lt; td *ngfor =“让列的属性| keyValue”＆gt;
      ＆lt; ng-container
         [ngtemplateoutlet] =“ columnbody”
         [ngtemplateOutletContext] =“ {$ ntimit：property.key}”
      ＆gt;＆lt;/ng-container＆gt;
    ＆lt;/td＆gt;
  ＆lt;/tr＆gt;
＆lt;/table＆gt;

在这里，ng-container传递传递templateref，然后传递到该templateref通过ngtemplate outletletletcontext（（与$隐式键一样，键值对或单个值。

关联的打字稿文件是：

 导出类TableComponent oninit {
  @input（）列！：{[键：字符串]：string};

  @contentChild（）columnheader！：templateref＆lt; any gt;;;
  @contentChild（）columnbody！：templateref＆lt; any gt;;;
}

，父组件可以按以下方式调用并传递数据：

 ＆lt; app-table
  url =“/api/translation/v1/jsons”
  [列] =“ {
    Col1：“第一栏”，
    COL2：“第二列”
  }”
＆gt;
  ＆lt; ng-template #columnheader let-field =“ field” let-text =“ text”＆gt;
    {{field}} {{text}}}
  ＆lt;/ng-template＆gt;

  ＆lt; ng-template #columnbody let-field＆gt;
    {{场地}}
  ＆lt;/ng-template＆gt;
＆lt;/app-table＆gt;

这样，我可以创建一个可重复使用的表组件而无需使用库

I found solution to it. I am new to Angular, and I was reluctant/afraid to use 'complex' built-in components.

Turns out you can use Vuejs' scoped slots like feature to create your components.

In the table HTML page, you define:

<table>
  <tr>
    <th *ngFor="let property of columns | keyvalue">
      <ng-container
         [ngTemplateOutlet]="columnHeader"
         [ngTemplateOutletContext]="{field: property.key, text: property.value}"
      ></ng-container>
    </th>
  </tr>
  <tr *ngFor="let data of datas">
    <td *ngFor="let property of columns | keyvalue">
      <ng-container
         [ngTemplateOutlet]="columnBody"
         [ngTemplateOutletContext]="{$implicit: property.key}"
      ></ng-container>
    </td>
  </tr>
</table>

Here, ng-container outputs passed TemplateRef, and pass to that templateRef the data through ngTemplateOutletContext (either key-value pairs or single value as with $implicit key).

The associated typescript file is:

export class TableComponent implements OnInit {
  @Input() columns!: {[key: string]: string};

  @ContentChild() columnHeader!: TemplateRef<any>;
  @ContentChild() columnBody!: TemplateRef<any>;
}

And the parent component can call and pass data as follows:

<app-table
  url="/api/translation/v1/jsons"
  [columns]="{
    col1: 'Column One',
    col2: 'Column Two'
  }"
>
  <ng-template #columnHeader  let-field="field" let-text="text">
    {{field}} {{text}}
  </ng-template>

  <ng-template #columnBody let-field>
    {{field}}
  </ng-template>
</app-table>

This way, I could create a reusable table component without using libraries

回复收藏 0 原文