Javascript 角度：显示两个类组件之间的差异

我有一个父组件。它将数据注入两个@Input（）子复制卡组件，显示html。此外，父类中存在差异类，标记这两个类之间的差异

在下面的html中显示类成员时，是否有方法突出显示在中更改的项，而不修改子组件？不希望在子卡组件中插入差异逻辑。宁愿让父控制器突出显示差异，而不让总体逻辑泄漏到子组件中

所有子组件都有相同的css类引用成员名称，.city引用城市，.zipcode属于项zipcode

可能需要创建javascript函数，然后在ngOnit中应用Angular，仍在研究，尝试应用这个答案

差异类：可以随意在父类中重新构造类，以便在需要时使解决方案更容易

export class DifferenceClass {   
    ClassMember: string;
    DifferentFlag: boolean;
}

源自

function isSame(obj1:any, obj2:any): DifferenceClass {
   let difference: DifferenceClass[];
   for (const key in obj1) {
     if (obj1[key] !== obj2[key]) {
       differences.push(new DifferenceClass(key,true));
     }
     else 
       differences.push(new DifferenceClass(key,false));
   }
   return differences;
 }

---

自定义指令有助于将某些UI逻辑与组件类分离

例如：

@Directive({
  selector: '[highlighter]',
})

@Input('streetName') streetName: string;

export class HighlighterDirective {
  constructor(private host: ElementRef,
              private rd: Renderer2) {}
} 

ngOnChanges(changes: SimpleChanges) {
  if (changes['streetName'].currentValue != changes['streetName'].previousValue) {
    this.rd.setStyle(this.host.nativeElement, 'color', 'red')
  }
}

p、 代码完全来自我的记忆，可能是一些类型，语法错误。但是您得到的idea指令可以访问组件上定义的相同输入：

---

然后，您可以使用

ngOnChanges

或其他技术来区分属性何时更改了其值，并使用renderr2（用于最佳实践）将直接更改应用于DOM。

知道您在说什么吗，ngclass是否必须在子元素处注入？试图在父级中寻找解决方案

@Directive({
  selector: '[highlighter]',
})

@Input('streetName') streetName: string;

export class HighlighterDirective {
  constructor(private host: ElementRef,
              private rd: Renderer2) {}
} 

ngOnChanges(changes: SimpleChanges) {
  if (changes['streetName'].currentValue != changes['streetName'].previousValue) {
    this.rd.setStyle(this.host.nativeElement, 'color', 'red')
  }
}