Angular 在父元素中添加子元素的位置答案

【问题标题】：Angular where to add child element in parentAngular 在父元素中添加子元素的位置
【发布时间】：2021-05-13 00:17:45
【问题描述】：

我的目标是调用另一个组件的方法，我正在使用@Output EventEmitter

我的场景如下：

 <p-button(onClick)="delete()">

componentAChild.component.ts：

@Output() refreshValue = new EventEmitter();

delete(){
//delete code
this.onDeleteUpdateValue();
}

onDeleteUpdateValue(){
this.refreshValue.emit();
}

componentBParent.component.ts：

onEventRefreshValue(){
 this.refresh();
}

refresh(){
//do something
}

componentBParent.component.html

我不知道应该在父模板中的什么位置包含子组件。

子组件：

<app-componentA(refreshValue)="onEventRefreshValue()"></app-componentA>

我的父模板，包括分页/延迟加载，类似于 primeNG 表：

<div>
    <p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
        [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [globalFilterFields]="['name','country.name', 'company', 'representative.name']">
        <ng-template pTemplate="header">
            <tr>
                <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                <th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
                <th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
                <th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
            </tr>
            <tr>
                <th>
                    <p-columnFilter type="text" field="name"></p-columnFilter>
                </th>
                <th>
                    <p-columnFilter type="text" field="country.name"></p-columnFilter>
                </th>
                <th>
                    <p-columnFilter type="text" field="company"></p-columnFilter>
                </th>
                <th>
                    <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                            <p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
                                <ng-template let-option pTemplate="item">
                                    <div class="p-multiselect-representative-option">
                                        <img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
                                        <span class="p-ml-1">{{option.name}}</span>
                                    </div>
                                </ng-template>
                            </p-multiSelect>
                        </ng-template>
                    </p-columnFilter>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-customer>
            <tr>
                <td>{{customer.name}}</td>
                <td>{{customer.country.name}}</td>
                <td>{{customer.company}}</td>
                <td>{{customer.representative.name}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>

任何建议，以及您能否帮助我在 Angular 中找到正确的文档以了解更多信息

【问题讨论】：

其实我不需要发送任何数据。我试图在父组件的
标记之后包含子组件，但是当我启动应用程序时，它不显示任何内容。在父级中添加子级的正确位置在哪里？
好吧，无论您希望它在布局中的哪个位置。将它放在父级中的</div> 之后就可以了（如果它是用于删除行的每行按钮，则将其放在列单元格中）。如果它没有显示：您在服务时是否在控制台中收到任何错误？听起来好像有什么问题。
到目前为止我没有任何错误，但是什么也没有显示，是否需要在子组件中添加一个条件来“激活它”直到事件发送？
没有。您可以检查 dom 以查看按钮是否确实存在。再次查看您的按钮，您没有指定标签。也许这就是它没有显示的原因。