Angular中无法从子组件高效触发父组件视图重渲染的问题

问题描述 #

当前通过子组件逐层向上发射事件更新父组件属性以触发视图渲染，这种方式需要逐层传递监听器，希望了解更优实现方案；另外在FiltrationComponent的clear方法中清空MainService的items属性后，视图未同步更新，需解决该问题。

现有代码结构 #

父组件AppComponent #

@Component({
    selector: 'app-root',
    template: `
        <app-header
            (filterItems)="filterItems($event)"
            [length]="items.length"
        ></app-header>
    `,
})

export class AppComponent implements OnInit {
    items: ItemT[] = [];
    constructor(private mainService: MainService) {}

    filterItems(filter: string) {
        this.items = this.mainService.filterItems(filter);
    }

    async ngOnInit() {
        this.items = await this.mainService.getItems();
    }
}

Header组件 #

@Component({
    selector: 'app-header',
    template: `
    <app-filtration (filterItems)="filterItems.emit($event)"></app-filtration>
    <h2>
        <span>{{ length }}</span>
        <ng-template #one>item</ng-template>
        <ng-template #many>items</ng-template>
        <ng-container *ngIf="length === 1; then one; else many"></ng-container>
    </h2>`,
})

export class HeaderComponent {
    @Input() length!: number;
    @Output() filterItems = new EventEmitter<string>();
}

Filtration组件 #

@Component({
    selector: 'app-filtration',
    template: `
        <div>insert a filter here</div>
        <input
            class="input filter-input"
            [(ngModel)]="filter"
            (input)="filterItems.emit(filter)"
        />
        <button (click)="clear()"></button>
    `,
})
export class FiltrationComponent {
    constructor(private mainService: MainService) {}

    filter: 'all' | 'active' | 'done' = 'all';

    @Output() filterItems = new EventEmitter<string>();

    clear() {
        this.mainService.items = [];
    }
}

MainService服务 #

const ITEMS_API = 'http://localhost:3000/base';
export class MainService {
    items: ItemT[] = [];

    constructor(private http: HttpClient) {}

    async getItems() {
        const json = await fetch(ITEMS_API);
        this.items = await json.json();

        return this.items;
    }

    filterItems(filter: string) {
        if (filter === 'all') {
            return this.items;
        }
        return this.items.filter((item) => {
            return filter === 'done' ? item.done : !item.done;
        });
    }
}

解决方案 #

一、优化组件通信：替代逐层事件传递 #

推荐使用RxJS Subject实现服务级状态管理，这是Angular中跨组件通信的最优方案之一，无需逐层传递事件，所有相关组件直接监听服务的状态变化。

修改MainService，引入RxJS Subject

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs';

const ITEMS_API = 'http://localhost:3000/base';

@Injectable({ providedIn: 'root' })
export class MainService {
    // 用BehaviorSubject维护数据源，初始值为空数组
    private itemsSubject = new BehaviorSubject<ItemT[]>([]);
    // 对外暴露可观察对象，组件只能订阅不能修改
    public items$: Observable<ItemT[]> = this.itemsSubject.asObservable();
    
    private filterSubject = new BehaviorSubject<'all' | 'active' | 'done'>('all');
    public filter$: Observable<'all' | 'active' | 'done'> = this.filterSubject.asObservable();

    constructor(private http: HttpClient) {}

    async getItems() {
        const response = await fetch(ITEMS_API);
        const data = await response.json();
        this.itemsSubject.next(data); // 更新Subject的值
        return data;
    }

    setFilter(filter: 'all' | 'active' | 'done') {
        this.filterSubject.next(filter); // 更新过滤条件
    }

    clearItems() {
        this.itemsSubject.next([]); // 清空数据
    }

    // 根据当前过滤条件返回处理后的数据
    getFilteredItems(): Observable<ItemT[]> {
        return combineLatest([this.items$, this.filter$]).pipe(
            map(([items, filter]) => {
                if (filter === 'all') return items;
                return items.filter(item => filter === 'done' ? item.done : !item.done);
            })
        );
    }
}

修改各组件，取消逐层事件传递

1. Filtration组件：直接调用服务方法，无需EventEmitter

@Component({
    selector: 'app-filtration',
    template: `
        <div>insert a filter here</div>
        <input
            class="input filter-input"
            [(ngModel)]="filter"
            (input)="mainService.setFilter(filter)"
        />
        <button (click)="mainService.clearItems()"></button>
    `,
})
export class FiltrationComponent {
    filter: 'all' | 'active' | 'done' = 'all';

    constructor(public mainService: MainService) {}
}

2. Header组件：直接订阅服务的过滤后数据，无需Input和Output

@Component({
    selector: 'app-header',
    template: `
    <app-filtration></app-filtration>
    <h2>
        <span>{{ filteredItemsLength }}</span>
        <ng-template #one>item</ng-template>
        <ng-template #many>items</ng-template>
        <ng-container *ngIf="filteredItemsLength === 1; then one; else many"></ng-container>
    </h2>`,
})
export class HeaderComponent {
    filteredItemsLength = 0;

    constructor(private mainService: MainService) {
        mainService.getFilteredItems().subscribe(items => {
            this.filteredItemsLength = items.length;
        });
    }
}

3. AppComponent：直接订阅服务的过滤后数据，无需处理事件

@Component({
    selector: 'app-root',
    template: `
        <app-header></app-header>
        <!-- 渲染items列表，用async管道自动订阅 -->
        <div *ngFor="let item of filteredItems$ | async">{{ item.name }}</div>
    `,
})

export class AppComponent implements OnInit {
    filteredItems$ = this.mainService.getFilteredItems();

    constructor(private mainService: MainService) {}

    async ngOnInit() {
        await this.mainService.getItems();
    }
}

二、解决clear方法不生效的问题 #

原问题根源：AppComponent的items变量是独立副本，初始赋值后与Service的items数组没有绑定关系，当Service的items被清空时，AppComponent的items不会自动更新。

通过上面的RxJS Subject方案，组件通过订阅服务的items$或filteredItems$可观察对象，能自动响应服务的数据变化，clear操作调用mainService.clearItems()后，Subject会推送新的空数组，所有订阅的组件都会同步更新视图。

如果不想用RxJS，也可以手动触发更新：

1. 在MainService中添加通知回调：

// MainService中
private updateCallback?: () => void;

setUpdateCallback(callback: () => void) {
    this.updateCallback = callback;
}

clearItems() {
    this.items = [];
    this.updateCallback?.(); // 通知组件更新
}

2. 在AppComponent中注册回调：

// AppComponent的ngOnInit中
async ngOnInit() {
    this.items = await this.mainService.getItems();
    this.mainService.setUpdateCallback(() => {
        this.items = [...this.mainService.items]; // 触发变更检测
    });
}

但这种方式不如RxJS优雅，推荐使用第一种Subject方案。

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