我在工作中使用的应用程序遇到了问题。
描述这个问题：我们的应用程序几乎有一个标准的外观和感觉，有几个不同的页面(可通过左侧的Angular菜单访问(，这些页面显示了实体列表(访问令牌、发票等(。大多数这些页面都有一个或多个过滤器来限制结果，这些过滤器位于页面顶部，由下拉框(用于枚举字段(或自由文本字段组成。
现在，当浏览应用程序的不同页面时，这些过滤器会丢失(设置为空(。我们希望过滤器在当前会话期间存储(直到用户关闭浏览器或选项卡(。因此，这绝对是我们可以使用SessionStorage的功能。此外，我们希望使实现尽可能通用，我们希望标记我们想要此功能的每个控件。所以我在考虑一个指令，我们将它添加到每个要临时存储状态的控制元素中。为了能够唯一地识别每个控件，我们确保每个控件都有id poperty集，从而保证它在当前页面中是唯一的。如果我们还想让它在整个网站上独一无二，我们需要页面名称(或者模板类名(和控件id的组合。
我的想法是：
- 创建一个指令，该指令将放置在我们想要维护状态的所有控件上(在会话期间(
- 初始化时，指令从sessionStore加载当前存储的值，并将其复制到控件的value属性
- 指令侦听onChange事件，并在每次更改后将新值存储在sessionStore中(一个可能更简单的替代方法是用onDestroy事件方法处理存储(
然而，这种方法存在问题。链接到筛选器的字段变量在Component中声明，并在其onUnit中初始化为空字符串/值。component.onInit在指令的onUnit之后调用，因此覆盖从sessionStore获得的值。忽略初始化会产生未定义的错误。
另一种选择可能是将当前筛选器值存储在onDestroy方法中的SessionStorage中，然后在onUnit方法中读取它们。这可能是一种可行的方法，但我目前认为没有一种方法可以在不需要为所有相关组件实现onInit和onDestroy的情况下以通用的方式实现它。我愿意接受一些暗示。我的一个朋友建议查看NgRx的应用程序状态。那是我能用的东西吗？
@Directive({
selector: '[appStoreFormFieldValue]'
})
export class StoreFormFieldValueDirective implements OnInit {
private key: string;
constructor(private elementRef: ElementRef) {}
@HostListener('change', ['$event.target']) onChange(target: any) {
console.log('Element changed!', target.value);
this.storeElementValue(target.value);
}
ngOnInit(): void {
console.log('OnInit directive');
this.elementRef.nativeElement.value = 'gezet in onInit ';
this.key = 'accesstoken-' + this.elementRef.nativeElement.id;
if (sessionStorage.getItem(this.key)) {
console.log('key found in session storage, set value in control'); ///THIS IS OVERRIDDEN IN THE COMPONENT
this.setElementValue(sessionStorage.getItem(this.key));
}
}
private storeElementValue(value: string) {
if (!value || value == '') {
sessionStorage.removeItem(this.key);
} else {
sessionStorage.setItem(this.key, value);
}
}
private setElementValue(value: string) {
this.elementRef.nativeElement.value = value;
}
}
export class AccessTokenComponent extends PaginationComponent implements OnInit {
filter = {
status: null,
accesstoken: undefined
}; //When omitting this initalization, errors are shown on the console
如下所述，我尝试更新ngAfterViewInit方法中的控制值，尽管它确实是在主组件的onUnit之后调用的，但该值不会在屏幕上更新。
ngAfterViewInit(): void {
this.renderer.setProperty(this.elementRef.nativeElement, 'value', 'GEzet in directive ngAfterViewInit met renderer');
this.elementRef.nativeElement.value = "GEzet in directive ngAfterViewInit zonder renderer";
}
您可以在指令中使用AfterViewInit钩子而不是OnInit。它将在视图初始化后触发，并且已设置默认值。
@Directive({
selector: '[appStoreFormFieldValue]'
})
export class StoreFormFieldValueDirective implements AfterViewInit {
// ...
ngAfterViewInit(): void {
console.log('AfterViewInit directive');
// ...
}
// ...
}