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.

[Angular Directive] 2. Add Inputs to Angular 2 Directives的更多相关文章

  1. [Angular Directive] 3. Handle Events with Angular 2 Directives

    A @Directive can also listen to events on their host element using @HostListener. This allows you to ...

  2. angular directive scope

    angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...

  3. [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2

     Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...

  4. [Angular Directive] Implement Structural Directive Data Binding with Context in Angular

    Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...

  5. Angular项目构建指南 - 不再为angular构建而犹豫不决(转)

    如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...

  6. [Angular 2 Router] Configure Your First Angular 2 Route

    Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...

  7. 【Angular专题】——(1)Angular,孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

  8. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  9. Angular 从入坑到挖坑 - Angular 使用入门

    一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...

随机推荐

  1. 28.semaphore跨进程通信

    根据id创建Semaphore,并初始化有一个信号量可用 name类型是char *...; HANDLE hsem = CreateSemaphoreA(NULL, 1, , name); 关闭句柄 ...

  2. IntelliJ IDEA 启动tomcat 报错: idea Unable to open debugger port (127.0.0.1:58233): java.net.SocketException "socket closed"

    debug启动项目弹出提示 Error running omp: Unable to open debugger port (127.0.0.1:50812): java.net.SocketExce ...

  3. vue中添加favicon

    基于vue-cli 2 首先将favicon.ico图片放在根目录下,通过以下两种方法使其显示正确. 方法一:修改index.html文件 <link rel="shortcut ic ...

  4. material风格前端CSS框架——Materialize

    官方网站:http://materializecss.com/(有中文,翻译不全) 中文学习站:http://www.materializecss.cn/(翻译较全)

  5. PatentTips - Virtual machine management using processor state information

    BACKGROUND OF THE INVENTION The invention generally relates to virtual machine management, and more ...

  6. php设置http请求头信息和响应头信息

    php设置http请求头信息和响应头信息 设置请求服务器的头信息可以用fsockopen,curl组件,header函数只能用来设置客户端响应的头信息,不能设置服务器的头信息. 例子;  一.head ...

  7. 1. 初识ZooKeeper。

    转自:https://blog.csdn.net/en_joker/article/details/78661466 Apache ZooKeeper是由 Apache Hadoop的子项目发展而来, ...

  8. 【“玲珑杯”ACM比赛 Round #20 H】康娜的数学课

    [链接]http://www.ifrog.cc/acm/problem/1161 [题意] 在这里写题意 [题解] 首先x<l肯定无解; 然后,肯定是要选其中的一些数字的. 而且这些数字肯定是大 ...

  9. 洛谷——P1601 A+B Problem(高精)

    https://www.luogu.org/problem/show?pid=1601#sub 题目背景 无 题目描述 高精度加法,x相当于a+b problem,[b][color=red]不用考虑 ...

  10. SVN—怎样安装SVNclient软件

            一.怎样安装TortoiseSVN-1.7.12.24070-win32-svn-1.7.9版本号的SVNclient软件:        a.下载TortoiseSVN-1.7.12 ...