Angular 如何在不重新加载整个站点的情况下更新子组件

我面临一个问题，在不重新加载整个站点的情况下更新子组件

结构父组件是：

父组件：

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

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>

插入表情符号
n级{{item.user}
事件
{{item.date}日期：'dd/MM/yyyy'}
{{item.comment}
由{{item.user}执行的FIN搜索。

和feed-list.ts

export class FeedListComponent implements OnInit {
  displayedColumns: string[] = ['feeds'];
  @Input() feedsOverviewData: Feeds[];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  dataSource = new MatTableDataSource<Feeds>(DATA);
  constructor() {
  }

导出类FeedListComponent实现OnInit{
displayedColumns:string[]=['feeds']；
@Input（）feedsOverviewData:Feeds[]；
@ViewChild（MatPaginator）分页器：MatPaginator；
数据源=新MatTableDataSource（数据）；
构造函数（）{
}

我使用这个feed组件，它还有一个子组件feed list组件

我的问题是，如果call sendFeedsComment返回200条回复，那么新的评论应该显示在提要列表中，而不上传整个站点

我有一个想法，我可以调用api getAllFeeds来获取所有注释，但是这个api将在父组件中使用

正确的实施方式是什么

有人能帮我吗

致以最良好的祝愿

---

Leo

您只需在feed-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>

提要列表。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;
     });
    });
  }

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

从'@angular/core'导入{OnChanges，SimpleChanges}；
导出类FeedListComponent实现OnInit、OnChanges{
displayedColumns:string[]=['feeds']；
@Input（）feedsOverviewData:Feeds[]；
@ViewChild（MatPaginator）分页器：MatPaginator；
数据源=新MatTableDataSource（数据）；
构造函数（）{
}
ngOnChanges（更改：SimpleChanges）：无效{
如果（更改！=null）{
控制台日志（更改）；
//在这里，当您单击提要上的sendComment按钮时，您将获得更新的数据
}
}

此处父组件的“feedsData”是什么？您在应用程序提要组件中将其作为属性绑定传递到此处？这是没有意义的。在您的情况下，您只需将此处获得的数据作为属性绑定传递到“应用程序提要列表”组件。执行此操作后，它将自动运行ngOnchanges'app feed list'的生命周期每当调用api且输入属性发生更改时，您将拥有更新的数据，而无需重新加载页面。问题是，如何将数据源与动态数据绑定？能否显示更改日志？bcs on changes您将获得更新的数据，因此您只需像这样绑定该数据源this.dataSource=changes//changes为您提供了包含预览值和当前值的对象，因此您需要对当前值进行值绑定。如果您向我显示更改日志，那就太好了。您可以看到此示例。

   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;
     });
    });
  }

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