首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 9-指令,如何从组件读取属性

在 Angular 9 中,要从组件读取属性,您可以使用@Input()装饰器将属性注入到指令中

  1. 创建一个指令文件。例如,我们创建一个名为example.directive.ts的文件。在这个文件中,我们将定义一个名为ExampleDirective的指令。
代码语言:javascript
复制
import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appExample]'
})
export class ExampleDirective {
  @Input('appExample') customProperty: any;

  constructor(private el: ElementRef) { }

  ngOnChanges() {
    // 在这里,您可以根据 customProperty 的值改变 DOM ,或者执行其他操作
    this.el.nativeElement.style.backgroundColor = this.customProperty;
  }
}

在这个例子中,我们使用@Input()装饰器定义了一个名为customProperty的输入属性。我们把改变元素背景颜色的操作放在ngOnChanges()生命周期钩子中,这样我们可以读取属性值的变化。

  1. 在组件的 HTML 模板中使用这个指令,并传递属性值。
代码语言:javascript
复制
<!-- app.component.html -->
<div [appExample]="propertyValue">Custom property value is: {{ propertyValue }}</div>
  1. 在组件类中定义属性值。
代码语言:javascript
复制
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  propertyValue = 'red';
}

现在,ExampleDirective将从AppComponent读取propertyValue属性,并根据其值改变元素的背景颜色。当propertyValue属性值发生改变时,ngOnChanges() 生命周期钩子将会触发,指令的逻辑会相应地更新 DOM。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券