Angular中点击按钮如何刷新特定div？

方法1：绑定内容到变量，通过更新变量触发刷新 #

适合div内容为动态绑定的场景，利用Angular的双向绑定特性，通过更新绑定变量自动刷新视图。

修改app.component.ts： #

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  // 定义绑定div内容的变量
  divContent = 'Start editing to see some magic happen :)';

  refresh() {
    // 实际场景可替换为重新获取数据等业务逻辑，此处用时间戳模拟刷新效果
    this.divContent = `刷新于 ${new Date().toLocaleTimeString()}`;
    
    // 若遇到异步操作后视图未更新的情况，可引入ChangeDetectorRef手动触发变更检测
    // import { ChangeDetectorRef } from '@angular/core';
    // constructor(private cdr: ChangeDetectorRef) {}
    // this.cdr.detectChanges();
  }
}

修改app.component.html： #

<hello name="{{ name }}"></hello>    
<div style="background-color:yellow; height:100px; width: 100%;">
  {{ divContent }}
</div>
<p>
<button (click)="refresh()" type="button">Refresh page</button>
</p>

方法2：用*ngIf触发元素重建 #

如果div包含复杂子组件或需要完全重置状态，可以通过*ngIf先销毁再重建元素，实现彻底刷新。

修改app.component.ts： #

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  // 控制div显示的标志位
  showDiv = true;

  refresh() {
    // 先隐藏div触发销毁，再延迟显示触发重建
    this.showDiv = false;
    setTimeout(() => {
      this.showDiv = true;
      // 此处可添加重新加载数据的逻辑
    }, 0);
  }
}

修改app.component.html： #

<hello name="{{ name }}"></hello>    
<div *ngIf="showDiv" style="background-color:yellow; height:100px; width: 100%;">
  Start editing to see some magic happen :)
</div>
<p>
<button (click)="refresh()" type="button">Refresh page</button>
</p>

若需刷新的是<hello>组件，只需将*ngIf绑定到该组件标签上即可。

内容的提问来源于stack exchange，提问作者neelam