javascript - Angular:显示两个类组件之间的差异
问题描述
我有一个父组件。它将数据注入到两个 @Input() 子重复卡片组件中,显示为 html。此外,父类中存在差异类,标记了两个类之间的差异。
在下面的 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。
推荐阅读
- newrelic - 从安全角度来看是否可以在页面的源代码中显示 bam.nr-data.net licenseKey
- java - 在Java中递归删除节点链表
- python - Python:将字符串转换为int的函数
- postgresql - PostgreSQL:无法登录 Postgres - sudo 坏了?
- assembly - ANSI escape codes not functioning when I printf them in x86 Assembly?
- powerbi - Power BI 向下钻取 Choropleth 自定义地图显示问题
- c# - Unity - 使用组件作为界面
- kotlin - 如何使用接口类型初始化 Kotlin 中的变量?
- android - RecycleView.ViewHolder 中的 buttonViewOption 方法丢失
- php - 如何防止来自 WordPress 的电子邮件使用 PHP 邮件进入垃圾邮件文件夹?