Angular.js: 无法设置自定义属性指令
Angular.js: Cannot set a custom attribute directive
我有一个超简单的代码,其中包含一个指令和一个尝试使用它的组件,但代码不起作用。无法理解我做错了什么。
@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
请告诉我,我在这里错过了什么?
该指令需要进入模块的声明数组,而不是组件装饰器的提供者数组。也在这里修复它:-
https://stackblitz.com/edit/angular-ivy-bz2sez?file=src/app/app.component.ts
我有一个超简单的代码,其中包含一个指令和一个尝试使用它的组件,但代码不起作用。无法理解我做错了什么。
@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
请告诉我,我在这里错过了什么?
该指令需要进入模块的声明数组,而不是组件装饰器的提供者数组。也在这里修复它:-
https://stackblitz.com/edit/angular-ivy-bz2sez?file=src/app/app.component.ts