在Angular中,我们可以使用指令来封装可重用的组件并在应用程序中重用它们。在指令中,我们也可以使用@Input
装饰器来创建可能具有值或不具有值的输入属性。这些输入属性使我们能够在使用指令的组件中提供参数。
以下是一个示例指令:
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[appHello]'
})
export class HelloDirective {
@Input() name: string;
constructor() { }
}
在组件中使用这个指令:
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
}
在上面的示例中,我们创建了一个指令appHello
,它具有一个输入属性name
。在组件中使用此指令时,我们可以将name
绑定到另一个变量或直接设置它的值。
例如,要将name
绑定到组件中的变量,请使用以下代码:
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
myName = 'John';
}
或者,如果我们想要直接设置name
的值,可以使用以下代码:
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
}
在这两种情况下,我们都可以在指令中访问name
的值,使我们能够自定义该指令在其它组件中的行为。