[英]Angular: Show difference between Two Class Components
我有一个父组件。 它将数据注入到两个 @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;
}
自定义指令有助于将一些 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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.