在Angular 17.1中,可以使用@Input装饰器将属性绑定到指令上。以下是一个示例代码,展示如何在指令上使用信号输入:
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[appSignalInput]'
})
export class SignalInputDirective {
@Input() signal: string;
constructor() { }
ngOnInit() {
console.log('Signal:', this.signal);
}
}
import { Component } from '@angular/core';
import { SignalInputDirective } from './signal-input.directive';
@Component({
selector: 'app-root',
template: `
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
@NgModule({
declarations: [
AppComponent,
SignalInputDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的代码中,我们创建了一个名为SignalInputDirective的指令类,并在其中定义了一个名为signal的属性。然后,我们在AppComponent中声明了指令,并在模板中使用它将信号属性绑定到指令上。
当应用程序运行时,指令的ngOnInit方法将被调用,并在控制台上打印出信号属性的值。
请确保在使用指令之前正确导入并声明指令。