指令Directive

  1. 指令是为Angular应用程序中的元素添加额外行为的类，使用Angular的内置指令，你可以管理表单、列表、样式已经要让用户看到的任何内容。
  2. 指令的类型如下：
    1. 组件：带有模板的指令，此类指令是最常见的指令类型。
    2. 属性型指令：可以更改元素、组件或者其他指令的外观或者行为的指令。
    3. 结构性指令：通过添加和删除DOM元素来更改DOM布局的指令。
  3. 内置属性型指令
    1. Angular内置了一些属性型指令用来监听并修改其他HTML元素和组件的行为、属性。
    2. 最常见的属性型指令如下：
      1. NgClass：添加和删除一组CSS类。
      2. NgStyle：添加额删除一组Html样式。
      3. NgModel：将数据双向绑定到Html表单元素上。
    3. 将NgClass与表达式一起使用，适合根据变量来应用到不同的CSS类，如下
      • 查看代码 
        import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ly-internal-directive',
  templateUrl: './ly-internal-directive.component.html',
  styleUrls: ['./ly-internal-directive.component.css']
})
export class LyInternalDirectiveComponent implements OnInit {

  constructor() { }
  // 定义一个变量，用于在模板文件中控制是否应用某个CSS类
  isSpecial = false;
  ngOnInit(): void {
  }

}
      • 查看代码 
        ly-internal-directive works!
        
 //special在css文件中定义的，如果isSpecial为true，则不应用任何CSS类，否则将应用special的CSS类

        special:应用样式的时候颜色将变红哦，否则就是黑色的
      • 查看代码 
        // 定义special的css类，用于体现效果
.special {
	font-family: 'Times New Roman', Times, serif;
	font-size:20px;
	color: red;
}
    4. 将NgClass与方法一起使用，其实还是调用k-v对象来存放多个可控制的css
      • 查看代码 
        import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ly-internal-directive',
  templateUrl: './ly-internal-directive.component.html',
  styleUrls: ['./ly-internal-directive.component.css'],
})
export class LyInternalDirectiveComponent implements OnInit {
  constructor() {}
  canSave = true;
  isSpecial = true;
  isUnchanged = true;
  // ts中类似于map或者dictionary的存在，模板页面将绑定此变量，用于控制多个CSS的显示或者隐藏
  currentClasses: Record = {};
  ngOnInit(): void {
    this.setCurrentClasses();
  }

  setCurrentClasses() {
    // 其中 saveable、modified都是在css类中定义的类，this.canSave和this.isUnchanged是用于控制这些calss是否被应用
    // angular会将下面的key作为class名称，赋值给dom的class
    this.currentClasses = {
      saveable: !this.canSave,
      modified: this.isUnchanged,
    };
  }
}
      • 查看代码 
        

        将NgClass与方法一起使用
      • 查看代码 
        .saveable {
	color: limegreen;
}
.modified {
  font-family: "Brush Script MT", cursive;
  font-size: 2rem;
}
    5. 用NgStyle设置内联样式
    6. 用NgMode进行双向绑定
  4. 内置结构性指令
  5. 自定义属性型指令
  6. 自定义结构性指令
Angular

相关

angularjs $emit $on $broadcast 父子 兄弟之间传值

Angular + ant design布局中实现国际化

前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

一个基于angularJS的工资计算器

Angular 创建组件报错 More than one module matches. Use skip-import option to ski

angular6 页面加载数据时的loading提示

angular6 监听url查询参数变化刷新页面

Angular前端项目发布到IIS

Angular2-编写一个简易的组件

Cordova+ionic+angular 项目从 UIWebView 更换为 WKWebView ，通过IOS审核

AngularJS基础

标签