ANGULAR 7 重新加载组件视图 [英] ANGULAR 7 reload component view

问题描述

我想通过单击按钮图标重新加载组件视图，而不刷新整个页面.

我的查看代码:

<nb-card-header><div class="row" style="font-size: 2.125rem !important;"><div class="col-sm-8">卡西耶表

<div class="col-sm-4 d-flex justify-content-end"><nb-action icon="ion-refresh sizeicone" (click)="refresh()"></nb-action>

</nb-card-header><nb-card-body><ng2-smart-table [settings]="settings" (custom)="onCustom($event)" [source]="source"(deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"(createConfirm)="onCreateConfirm($event)"></ng2-smart-table></nb-card-body></nb-card>

解决方案

在 angular 中，您不需要刷新组件 - angular 会在检测到模板上使用的变量发生更改时自动刷新页面内容.所以在 refresh() 方法中只更新变量值.但是，如果您真的想手动执行此操作，则可以使用以下构造:

模板:

ts 文件:

public refresh() {this.showComponent=false;setTimeout(x=>this.showComponent=true);}

I want to reload a component view by clicking button icon, without refreshing the whole page.

My view code:

<nb-card>
  <nb-card-header>
    <div class="row" style="font-size: 2.125rem !important;">
      <div class="col-sm-8">
        Tableau des Casiers 
      </div>
      <div class="col-sm-4 d-flex justify-content-end">
        <nb-action icon="ion-refresh sizeicone" (click)="refresh()"></nb-action>
      </div>
    </div>
  </nb-card-header>

  <nb-card-body>
    <ng2-smart-table [settings]="settings" (custom)="onCustom($event)" [source]="source"
      (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"
      (createConfirm)="onCreateConfirm($event)">
    </ng2-smart-table>
  </nb-card-body>
</nb-card>

解决方案

In angular you don't need to refresh a component - angular will refresh page content automatically when it detects that variables, used on template, changes. So in refresh() method just update variables values. However if you really want to do it manually then you can use following construction:

template:

<my-component *ngIf="showComponent"></my-component>

ts file:

public refresh() {
   this.showComponent=false;
   setTimeout(x=>this.showComponent=true);
}

这篇关于ANGULAR 7 重新加载组件视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！