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

【问题标题】：How is an instance of a parent component passed into a child component constructor?父组件的实例如何传递给子组件的构造函数？
【发布时间】：2019-09-28 11:19:48
【问题描述】：

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

这里是 TableBody 组件的源代码，其中包含 Table 组件的一个实例。 PrimeNG Table Source

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

表格组件模板片段

            <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 source

非常感谢任何见解。

【问题讨论】：

标签： javascript html angular typescript primeng

【解决方案1】：

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

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

希望我能帮上一点忙。

【讨论】：

Ollpej - 是的，我了解输入/输出装饰器的工作原理，但这不是 Table 组件实例传递到 TableBody 组件的方式。它通过构造函数完成。
构造函数用于加载服务而不是组件。 constructor(private logger: LoggerService) 在构造函数之外我们可以使用logger变量来访问LoggerService.ts中的函数
我明白你在说什么，但你看过 github 源代码吗？它是一个在构造函数中传递的组件。