在单个模板中多次使用angular组件-在其内部追加列表

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

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class ListComponent {
  @Input() items: string[];
}

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

@Component({
  selector: 'app-parent',
  template: `
    <app-list [items]="list1"></app-list>
    <app-list [items]="list2"></app-list>
  `
})
export class ParentComponent {
  list1 = ['Item 1', 'Item 2', 'Item 3'];
  list2 = ['Item A', 'Item B', 'Item C'];
}

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-list',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent {
  @Input() items: string[];

  constructor(private cdr: ChangeDetectorRef) {}

  addItem(item: string) {
    this.items.push(item);
    this.cdr.markForCheck(); // 手动标记为需要检查
  }
}