Angular：显示两个类组件之间的差异答案

【问题标题】：Angular: Show difference between Two Class ComponentsAngular：显示两个类组件之间的差异
【发布时间】：2020-04-03 05:21:25
【问题描述】：

我有一个父组件。它将数据注入到两个 @Input() 子重复卡片组件中，显示为 html。另外，parent 中存在差异类，标记了两个类之间的差异。

当在下面的 html 中显示类成员时，是否有方法可以突出显示已更改的项目，而无需修改子组件？最好不要在子卡组件中注入差异逻辑。宁愿让父控制器突出差异，而不会将整体逻辑泄漏到子组件中。

所有子组件都有相同的 css 类引用成员名称，.city 表示城市，.zipcode 属于项目邮政编码，

可能需要创建 javascript 函数，然后在 ngOnit 中应用 Angular，仍在研究，尝试应用这个答案可能吗？ Generate dynamic css based on variables angular

export class PropertyLocation {   
    streetName: string;
    streetType: string;
    postdirectional?: string;
    unitNumber?: string;
    unitType?: string;
    city: string;
    state?: string;
    zipcode: number;

    effectiveStartDate: Date;
    addressChangeReason?: AddressChangeReasonDto;
    addressSource?: SourceOfAddressDto;
}

差异类：随意重组父类，如果需要，使解决方案更容易

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;
 }

【问题讨论】：

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

标签： javascript html angular typescript angular8

【解决方案1】：

自定义指令有助于将一些 UI 逻辑与 Component 类分开。

例子：

@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')
  }
}

附言代码完全来自我的记忆，可能是某些类型、语法错误。但是你明白了 - 指令可以访问组件上定义的相同输入：

<custom-component [streetName] highlighter></custom-component>

然后，您可以使用ngOnChanges 或其他技术来区分属性何时更改了其值并使用 Renderer2（最佳实践）将直接更改应用到 DOM。

【讨论】：