[Angular Directive] 2. Add Inputs to Angular 2 Directives

最新推荐文章于 2024-12-31 11:21:10 发布

weixin_30485799

最新推荐文章于 2024-12-31 11:21:10 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6206205.html

本文介绍了Angular中如何使用@Input装饰器为指令传递值。通过示例展示了如何将值传递给指令并在每次使用时更改其值，使得指令更加灵活和可复用。此外，还演示了如何使用getter将输入值反映到宿主元素的innerText属性。

The @Input decorator allows you to pass values into your @Directive so that you can change the value of the Directive each time that it is used. Using @Input makes your Directives much more flexible and reusable so they can adapt to many different situations.

import {Directive, Input, HostBinding} from '@angular/core';

@Directive({
  selector: '[getInput]'
})
export class GetInputDirective {

  @Input('getInput') input;
  @HostBinding() get innerText() {
    return this.input;
  }
  constructor() {

  }

}

<span [getInput]="'something'">I am a span</span>

[getInput] means we have a prop on our directive call 'getInput', go and find it and set the value as 'something'.

It will only show "something" on the page. Here we pass value to the directive, then reflect the input value to the Host element's innerText by using getter.

转载于:https://www.cnblogs.com/Answer1215/p/6206205.html