Angular.js: 无法设置自定义属性指令

Question

我有一个超简单的代码，其中包含一个指令和一个尝试使用它的组件，但代码不起作用。无法理解我做错了什么。

@Directive({
  selector: '[classSetter]'
})
class classSetter implements OnInit {
  
  @Input() classSetter : string = "";

  el : ElementRef;

  constructor (el : ElementRef) {
    this.el = el;
  }

  ngOnInit () {
    this.el.nativeElement.classList.add(this.classSetter);
  }
}

@Component({
  selector: 'app-root',
  styles: ['.blue {background-color: blue;}'],
  template: `
              <span [classSetter]="'blue'">{{title}}</span>
            `
})
export class AppComponent {
  title = 'directive';
}

我收到的错误是 无法绑定到 'classSetter'，因为它不是 'span' 的已知属性。

StackBlitz：https://stackblitz.com/edit/angular-ivy-gf1ee4

请告诉我，我在这里错过了什么？

Answer 1

该指令需要进入模块的声明数组，而不是组件装饰器的提供者数组。也在这里修复它：-

https://stackblitz.com/edit/angular-ivy-bz2sez?file=src/app/app.component.ts

Angular.js: 无法设置自定义属性指令

Angular.js: Cannot set a custom attribute directive

angular

attributes

directive