Angular：如何仅重新渲染组件部分内容而非整个组件？

完全可以只重新加载/渲染组件的部分内容，核心思路是将REST API数据和数据库数据的加载逻辑分离，让Angular的变更检测只针对数据库数据对应的模板区域更新，同时避免重复代码。

方法一：使用独立Observable + Async管道（基础版） #

把两个数据源分别用独立的Observable管理，REST数据仅在组件初始化时加载一次，数据库数据通过方法触发重新请求，模板中用async管道绑定，这样只有数据库对应的区域会在数据更新时重新渲染。

修改后的组件代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div class="component-wrapper">
      <!-- REST API数据区域：仅初始化加载一次 -->
      <div class="rest-section">
        <div *ngIf="restData$ | async as restData">
          Data from REST API: {{ restData | json }}
        </div>
      </div>

      <!-- 数据库数据区域：可单独刷新 -->
      <div class="db-section">
        <button (click)="refreshDbData()">刷新数据库数据</button>
        <div *ngIf="dbData$ | async as dbData">
          <div>Data from DB: {{ dbData.field1 }}</div>
          <div>Data from DB: {{ dbData.field2 }}</div>
        </div>
      </div>
    </div>
  `
})
export class AppComponent implements OnInit {
  restData$: Observable<any>;
  dbData$: Observable<any>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // REST API数据仅在组件初始化时请求一次
    this.restData$ = this.http.get('你的REST API地址');
    // 初始化加载数据库数据
    this.refreshDbData();
  }

  refreshDbData() {
    // 每次调用都会重新请求数据库数据，触发对应模板区域更新
    this.dbData$ = this.http.get('你的数据库接口地址');
  }
}

原理说明 #

• async管道会自动管理Observable的订阅与销毁，避免内存泄漏。
• REST数据的Observable仅在ngOnInit中赋值一次，所以只会加载一次，对应的模板区域不会重复渲染。
• 调用refreshDbData()时，会重新创建数据库数据的Observable，async管道检测到变化后会重新订阅并渲染数据库区域，REST区域不受影响。

方法二：用BehaviorSubject触发刷新（适合频繁刷新场景） #

如果需要频繁刷新数据库数据，使用BehaviorSubject作为触发信号，避免重复创建Observable，性能更优：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <div class="component-wrapper">
      <div class="rest-section">
        <div *ngIf="restData$ | async as restData">
          Data from REST API: {{ restData | json }}
        </div>
      </div>

      <div class="db-section">
        <button (click)="refreshDbData()">刷新数据库数据</button>
        <div *ngIf="dbData$ | async as dbData">
          <div>Data from DB: {{ dbData.field1 }}</div>
          <div>Data from DB: {{ dbData.field2 }}</div>
        </div>
      </div>
    </div>
  `
})
export class AppComponent implements OnInit {
  restData$: Observable<any>;
  // 用BehaviorSubject作为刷新触发信号
  private refreshTrigger$ = new BehaviorSubject<void>(undefined);
  dbData$: Observable<any>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.restData$ = this.http.get('你的REST API地址');
    // 每次trigger发出信号时，重新请求数据库数据
    this.dbData$ = this.refreshTrigger$.pipe(
      switchMap(() => this.http.get('你的数据库接口地址'))
    );
  }

  refreshDbData() {
    // 发送刷新信号，无需重新创建Observable
    this.refreshTrigger$.next();
  }
}

可选优化：拆分数据库区域为子组件（无重复代码） #

如果后续数据库区域的逻辑变得复杂，建议将其拆分为独立子组件，父组件负责加载REST数据并传递给子组件（如果需要），子组件内部处理数据库数据的刷新。这种方式不会违反DRY原则，反而实现了职责分离，代码更易维护：

• 父组件：加载REST数据，引入子组件并传递必要数据。
• 子组件：负责数据库数据的加载、刷新和渲染。

这种拆分后的代码没有重复逻辑，反而让每个组件的职责更单一。

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