时间戳

首页 > 解决方案 > 父组件的实例如何传递给子组件的构造函数？

javascript - 父组件的实例如何传递给子组件的构造函数？

问题描述

我试图了解表格组件在 PrimeNG 中的工作原理。我对如何将父组件的实例传递给子组件的构造函数感到困惑。

这是 TableBody 组件的源代码，其中包含 Table 组件的实例。PrimeNG 表源

所以我的理解是 TableBody 组件有一个属性作为选择器。它是从父（表）组件传入的列和 bodyTemplate 中。现在我不明白的是父组件（表）的实例在创建时是如何传递给它的。

表格组件模板的片段

            <div class="ui-table-wrapper" *ngIf="!scrollable">
            <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
                <thead class="ui-table-thead">
                    <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
                </thead>
                <tfoot *ngIf="footerTemplate" class="ui-table-tfoot">
                    <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
                </tfoot>
                <tbody class="ui-table-tbody" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
            </table>
        </div>

完整源码：Github 源码

非常感谢任何见解。

标签： javascripthtmlangulartypescriptprimeng

解决方案

父组件中的属性 [pTableBody] 和 [pTableBodyTemplate] 在 ts 文件中声明了 @Input。并且“列”绑定到具有相同名称的变量。

阅读一些关于输入和输出的信息https://www.sitepoint.com/angular-2-components-inputs-outputs/

希望我能有所帮助。

推荐阅读