我在不重新加载整个站点的情况下更新子组件时遇到了问题。
父级结构为:
父组件:
<div class="overview">
<div class="vehicle-img">
<img src={{vehicleImg}} />
</div>
<div class="board">
<div class="board-column company-overview">
<div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" | translate}}</div>
<div class="board-column-content">
<app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview>
<div *ngIf="!companyOverviewData" class="loading">
<app-loading></app-loading>
</div>
</div>
</div>
<div class="board-column feeds">
<div class="board-column-header">{{ "FEEDS.TITLE" | translate}}</div>
<div class="board-column-content">
<app-feeds [FeedsData]="feedsData"></app-feeds>
<div *ngIf="!feedsData" class="loading">
<app-loading></app-loading>
</div>
</div>
</div>
</div>
提要组件:
<div class="feeds">
<mat-card class="feed-card">
<mat-card-title>
<div class="title">
<h3>{{ 'FEEDS.SUBTITLE' | translate}} {{vin}}</h3>
<hr>
</div>
</mat-card-title>
<app-feed-list></app-feed-list>
<div class="comment">
<textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
<button mat-button [disabled]="!feedsComment" (click)="sendComment()">
<mat-icon class="send-button" matSuffix>send</mat-icon>
</button>
</div>
</mat-card>
</div>
在此组件中,有一个输入字段和一个按钮。 如果单击该按钮,它将调用post api服务。将数据发送到后端。
public sendComment(): void {
alert(this.feedsComment);
let newFeeds = this.createFeeds();
this.feedsService.sendFeedsComment(newFeeds).subscribe(() => {
this.feedsService.getFeedsOverview(this.vin).subscribe((feedsData: Feeds[]) => {
this.feedsOverviewData = feedsData;
});
});
}
feeds-list.html:
<div class="feed-list">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="feeds">
<td mat-cell *matCellDef="let item">
<mat-card-header>
<div mat-card-avatar>
<mat-icon class="avatar">insert_emoticon</mat-icon>
</div>
<mat-card-title class="feeds-header"><b>
<div *ngIf="item.comment !== ''">
<span>n-Level {{item.user}}</span>
</div>
<div *ngIf="item.comment === ''">
<span>Event</span>
</div>
</b>
</mat-card-title>
<mat-card-subtitle class="feeds-date">{{item.date | date: 'dd/MM/yyyy'}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div *ngIf="item.comment !== ''">
<div class="feeds-info">{{item.comment}}</div>
</div>
<div *ngIf="item.comment === ''">
<div class="feeds-info">FIN search executed by {{item.user}}.</div>
</div>
</mat-card-content>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="footer">
<mat-paginator [length]="" [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 30, 40, 50]" showFirstLastButtons></mat-paginator>
</div>
</div>
和feeds-list.ts
export class FeedListComponent implements OnInit {
displayedColumns: string[] = ['feeds'];
@Input() feedsOverviewData: Feeds[];
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource = new MatTableDataSource<Feeds>(DATA);
constructor() {
}
此供稿组件,还具有子组件供稿列表组件
我的问题是,如果调用sendFeedsComment返回200,则该新注释应显示在摘要列表中,而不上传整个网站。我有个主意,我可以调用api getAllFeeds来获取所有注释,但是此api将在父组件中使用。
什么是正确的实施方式
有人可以帮我吗?
最好的问候,
狮子座
答案 0 :(得分:1)
您需要做的就是feeds-list.ts上的ngOnChanges,只要更改输入参数值,ngOnchanges就会触发,因此在您的情况下,输入参数是feedsOverviewData。 这是例子。我希望它可以帮助您
feeds.html
<div class="feeds">
<mat-card class="feed-card">
<mat-card-title>
<div class="title">
<h3>{{ 'FEEDS.SUBTITLE' | translate}} {{vin}}</h3>
<hr>
</div>
</mat-card-title>
<app-feed-list [feedsOverviewData]="feedsOverviewData"></app-feed-list>
<div class="comment">
<textarea class="textarea" matInput placeholder="Enter your comment ..."
[(ngModel)]="feedsComment"></textarea>
<button mat-button [disabled]="!feedsComment" (click)="sendComment()">
<mat-icon class="send-button" matSuffix>send</mat-icon>
</button>
</div>
</mat-card>
</div>
feeds.ts
public sendComment(): void {
alert(this.feedsComment);
let newFeeds = this.createFeeds();
this.feedsService.sendFeedsComment(newFeeds).subscribe(() => {
this.feedsService.getFeedsOverview(this.vin).subscribe((feedsData: Feeds[]) =>
{
this.feedsOverviewData = feedsData;
});
});
}
feeds-list.ts
import { OnChanges, SimpleChanges } from '@angular/core';
export class FeedListComponent implements OnInit, OnChanges {
displayedColumns: string[] = ['feeds'];
@Input() feedsOverviewData: Feeds[];
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource = new MatTableDataSource<Feeds>(DATA);
constructor() {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes != null) {
console.log(changes);
// here you will get the updated data when ever you click the sendComment button on feeds
}
}