实现angular-scroll-spy遇NG8002错误：div无spiedTags属性

这个错误本质是Angular没认出你用的scrollSpy指令，自然也就不知道它的输入属性spiedTags属于谁。别着急，按下面几步排查：

1. 检查自定义指令的定义是否正确 #

首先确保你的scrollSpy指令是用@Directive装饰器声明的，并且spiedTags被正确标记为输入属性：

import { Directive, Input, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[scrollSpy]' // 注意选择器要和模板里的scrollSpy属性完全一致
})
export class ScrollSpyDirective {
  @Input() spiedTags: string[] = []; // 这里必须用@Input()装饰，否则Angular不会把它当作输入属性
  @Output() sectionChange = new EventEmitter<string>();

  // 指令的其他逻辑代码...
}

2. 确保指令在模块中被正确声明/导入 #

如果你的指令是封装在单独的模块（比如ScrollSpyModule）里，那在使用该指令的组件所在模块中，必须导入这个模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollSpyModule } from './path/to/scroll-spy.module'; // 替换成你的指令模块实际路径
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    CommonModule,
    ScrollSpyModule // 导入包含scrollSpy指令的模块
  ]
})
export class YourModule { }

如果指令和组件在同一个模块里，直接把指令加到模块的declarations数组中即可：

@NgModule({
  declarations: [YourComponent, ScrollSpyDirective], // 显式声明指令
  imports: [CommonModule]
})
export class YourModule { }

3. 检查模板中的拼写和大小写 #

Angular对属性绑定的大小写是敏感的，确保模板里的scrollSpy和spiedTags和指令里的命名完全一致——比如指令里是spiedTags，模板里不能写成spiedtags（小写t）。你的模板代码看起来没问题，但可以再仔细核对一遍：

<div *ngIf="candidate_output; else contentLoading;" 
     id="parentDiv" 
     scrollSpy 
     [spiedTags]="['DIV']" 
     (sectionChange)="onSectionChange($event)">

4. 排除其他低级错误 #

• 别把指令误写成了组件（用@Component装饰），必须是@Directive才能作为属性绑定在元素上
• 确认指令文件没有语法错误，比如漏了分号、括号不匹配，这些会导致Angular无法正确编译识别指令

按这几步走，基本就能解决这个NG8002错误了。

内容的提问来源于stack exchange，提问作者Dako patel