Angular：顯示兩個類組件之間的差異

Question

我有一個父組件。 它將數據注入到兩個 @Input() Child 重復卡片組件中，顯示 html。 此外，parent 中有差異類，標記兩個類之間的差異。

在下面的 html 中顯示類成員時，是否有方法突出顯示已更改的項目，而無需修改子組件？ 最好不要在子卡組件中注入差異邏輯。 寧願讓父控制器突出差異，而不會將整體邏輯泄漏到子組件中。

所有子組件都具有相同的 css 類，引用成員名稱，.city 表示城市，.zipcode 表示項目郵政編碼，

可能需要創建 javascript 函數，然后在 ngOnit 中應用 Angular，仍在研究中，嘗試應用這個答案？ 根據變量angular生成動態css

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

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

ps 代碼完全出自我的記憶，可能是某些類型、語法錯誤。 但是你明白了 - 指令可以訪問組件上定義的相同輸入：

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

然后，您可以使用ngOnChanges或其他技術來區分屬性何時更改了其值，並使用 Renderer2（對於最佳實踐）將直接更改應用於 DOM。