Angular6 手动创建指令

阳光穿透心脏的1/2处 2024-04-19 09:15 69阅读 0赞

该指令用于演示如何利用 `HostBinding` 装饰器，设置元素的 `innerText` 属性。

![20190916153855653.png][]

**greet.directive.ts**

import { Directive, HostBinding} from '@angular/core';
    
    @Directive({
        selector: '[greet]'
    })
    export class GreetDirective {
      @HostBinding() innerText = 'Hello, Everyone!';
    }

**app.component.html**

<h2>hello angular</h2>
    <h2 greet>hello angular</h2>

**app.module.ts**

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    
    import { AppComponent } from './app.component';
    import { GreetDirective } from './directive/greet.directive';
    
    @NgModule({
      imports:      [ BrowserModule, FormsModule ],
      declarations: [ AppComponent, GreetDirective ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

[20190916153855653.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e99575bcd22b4bb68fc42031e6931741.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/267af41fa8554df88c9b9a92ed10f365.png

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 手动创建指令

指令用于演示如何利用 `HostBinding` 装饰器，设置元素的 `innerText` 属性。 ![20190916153855653.png][] **gre...

阳光穿透心脏的1/2处/ 2024年04月19日 09:15/ 0 赞/ 70 阅读

相关 Angular6 学习笔记——指令

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

偏执的太偏执、/ 2023年05月30日 15:58/ 0 赞/ 19 阅读

相关 [angular]指令之6require

<!DOCTYPE html> <html lang="en" ng-app="testDirectiveRequire"> <head>

桃扇骨/ 2022年07月13日 03:22/ 0 赞/ 204 阅读

相关 Angular自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年06月10日 02:52/ 0 赞/ 261 阅读

相关 Yeoman创建angular项目中的指令demo

本文主要介绍如何通过Yeoman的方式快速的建立angular中的directive（指令）。本文主要参考《angularjs 高级编程》好，下面上货。先介绍一下指

我不是女神ヾ/ 2022年05月29日 05:27/ 0 赞/ 207 阅读

相关 angular&创建指令&指令对象

创建指令指令也是一种服务，只是这种服务的定义有几个特殊要求：必须使用模块的directive（）方法注册服务对象工厂必须返回一个指令定义的对象

痛定思痛。/ 2022年05月24日 09:50/ 0 赞/ 224 阅读

相关 angular6学习(十一)：属性指令

一：ngStyle 设置样式： ts文件： ![70][] html文件 ![70 1][] 引用app-server ![70 2][] 显示： ![

亦凉/ 2022年05月09日 03:42/ 0 赞/ 198 阅读

相关 angular6学习(十)：指令

基础知识 ![70][] 一：ngIf 实现功能:在输入框内输入内容，按按钮后将内容显示到下方 ts文件 ![70 1][] html文件： ![70 2

雨点打透心脏的1/2处/ 2022年05月09日 03:40/ 0 赞/ 197 阅读

相关 angular6学习(五)：创建组键

两种创建方式：手动创建和命令创建手动创建：一：基础知识： ![70][] ![70 1][] 代码说明： ![70 2][] 二：代码实现： 1.在a

た入场券/ 2022年05月08日 23:38/ 0 赞/ 177 阅读

相关 Angular学习-指令入门

1.指令的定义从用户的角度来看，指令就是在应用的模板中使用的自定义HTML标签。指令可以很简单，也可以很复杂。AngularJS的HTML编译器会解析指令，增强模板的功

一时失言乱红尘/ 2022年03月27日 04:53/ 0 赞/ 220 阅读