要展示两个Angular类组件之间的差异，你可以使用以下步骤：

1. 创建两个不同的类组件，其中一个作为源组件，另一个作为目标组件。

2. 在源组件中定义一个用于存储差异数据的属性，例如diffData。

3. 在源组件中，使用ngOnChanges生命周期钩子来监听目标组件的变化。当目标组件发生变化时，将差异数据存储在diffData属性中。

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

@Component({
  selector: 'app-source',
  template: `
    

      
Source Component
      
Diff Data: {{ diffData }}
    
  `,
})
export class SourceComponent implements OnChanges {
  @Input() targetData: string;
  diffData: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.targetData) {
      this.diffData = this.calculateDiff(this.targetData, changes.targetData.currentValue);
    }
  }

  calculateDiff(targetData: string, currentValue: string): string {
    // 计算差异的逻辑
    // 返回两个字符串之间的差异
    // 例如，可以使用diff算法或字符串比较函数来计算差异
  }
}

4. 在目标组件中，定义一个属性，例如targetData，并在需要的时候修改该属性的值。

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

@Component({
  selector: 'app-target',
  template: `
    

      
Target Component
      Update Data
    
  `,
})
export class TargetComponent {
  targetData: string;

  updateData() {
    // 根据需要更新目标数据
    // 可以是用户输入，服务器响应等
    this.targetData = 'New Data';
  }
}

5. 在父组件中，将源组件和目标组件添加到模板中。

通过以上步骤，源组件将监听目标组件的变化，并在diffData属性中计算并显示两者之间的差异。每当目标组件的数据发生变化时，源组件将自动更新差异数据。