Ссылка на эту пользовательскую директиву Angular 2 (которая расширяет NgFor) в компоненте, а затем использование NgFor на странице приводит к дублированию перечисления:
import {
Directive,
ChangeDetectorRef,
IterableDiffers,
ViewContainerRef,
TemplateRef,
ElementRef
} from '@angular/core';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
import { NgFor } from '@angular/common';
import { NgForRow } from './ngForRow';
import { AppComponent } from '../../app.component';
@Directive({
selector: '[ngTreeLeaf][ngTreeLeafOf]',
inputs: [
'ngTreeLeafOf',
'ngTreeLeafTemplate',
'ngTreeLeafRoute'
]
})
export class NgTreeLeaf extends NgFor {
private _routePattern: RegExp;
constructor(
viewContainer: ViewContainerRef,
templateRef: TemplateRef<NgForRow>,
iterableDiffers: IterableDiffers,
cdr: ChangeDetectorRef,
private _router: Router,
private _elementRef: ElementRef) {
super(viewContainer, templateRef, iterableDiffers, cdr);
}
set ngTreeLeafOf(leaves: Array<any>) {
this.ngForOf = leaves;
}
set ngTreeLeafRoute(route: string) {
this._routePattern = new RegExp(route + "\\b", "g");
}
set ngTreeLeafTemplate(value: TemplateRef<NgForRow>) {
this.ngForTemplate = value;
}
isLeafActive(urlString: string) {
if (!this._router || !this._routePattern) return false;
let active = this._routePattern.test(this._router.url);
if (active) {
this._elementRef.nativeElement.parentElement.classList.add("active");
}
else {
this._elementRef.nativeElement.parentElement.classList.remove("active");
}
return active;
}
}
Как упоминается в в этом ответе, аннотации не наследуются, поэтому я не уверен, откуда взялся мотив для применения моего кода. кроме того. Я предполагаю, что это должно быть либо имя родительского класса, взаимодействующее с DI, либо комбинация обнаруживаемого DoCheck и переменной, которая каким-то образом разделяется. Но я не сразу вижу проблему.
Какие-либо предложения? Также кажется здесь, как будто я не ожидал этой проблемы.