活动类未使用指令应用于宿主元素

Question

我正在尝试创建一个指令，用于在单击菜单时滚动页面，并在滚动页面时应用活动类。

首先，我尝试在菜单上点击页面滚动，它可以工作，但我的问题是活动类没有正确应用于宿主元素。下面是我的代码行

组件

courses = [
{label: 'JS', name: 'js',type:[
{label:'Angular',name:'angular'},
{label:'React Js',name:'reactjs'},
{label:'Node Js',name:'nodejs'},
]},
]

.html

<ul *ngFor="let course of courses">
<li>{{course.name}}</li>
<ul *ngIf="course.type">
<li *ngFor="let type of course.type" appScroll>
{{type.name}}
</li>
</ul>
</ul>

指令

@Directive({
selector: '[appScroll]'
})
export class ScrollDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
@HostBinding('class.active') isActive: boolean
@HostListener('click', ['$event'])
onClick() {
const parentNode = this.el.nativeElement.parentNode
let node = parentNode.firstElementChild;
while (node) {
if (node !== this.el.nativeElement)
{
console.log(node)
this.renderer.removeClass(node, 'active')
}
node = node.nextElementSibling;
}
//  for setting active class to current element
this.isActive = true
}
}

第一次它的工作意味着当我第一次点击每个菜单时，它将活动类应用于点击的菜单，并从所有同级中删除活动类(如果有的话(，但再次点击时，活动类不会应用

我能够通过以下代码行实现

this.renderer.addClass(this.el.nativeElement, 'active')

但我很想知道为什么它第一次在this.isActive = true上工作而第二次在上不工作

示例演示

https://stackblitz.com/edit/angular-ivy-pcwunt?embed=1&file=src/app/scroll.directive.ts

Answer 1

我看到您正在使用Renderer2删除该类。Angular从同级中删除类时，该元素的isActive属性不会更改。因此，当您第二次单击时，Angular认为它不需要更新模板，因为没有任何更改。

不使用HostBinding，而是在单击处理程序的第一行中写入this.renderer.addClass(this.el.nativeElement, 'active')。