发表于: 2021-03-17 21:24:12

1 966


今天完成的事情:

指令

指令概览

在 Angular 中有三种类型的指令:

组件 — 拥有模板的指令

结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令


内置指令

内置属性型指令

属性型指令会监听并修改其它 HTML 元素和组件的行为、Attribute 和 Property。 它们通常被应用在元素上,就好像它们是 HTML 属性一样,因此得名属性型指令

最常见的属性型指令:

NgClass —— 添加和删除一组 CSS 类

NgStyle —— 添加和删除一组 HTML 样式

NgModel —— 将数据双向绑定添加到 HTML 表单元素


NgClass

同时添加或删除几个 CSS 类

<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>


NgStyle

<div [ngStyle]="currentStyles">
    This div is initially italic, normal weight, and extra large (24px).
  </div>


[(ngModel)] :双向绑定

<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">


导入 FormsModule 以使用 ngModel

在app.module.ts中

import { FormsModule } from '@angular/forms'// <--- JavaScript import from Angular
@NgModule({

  imports: [
    BrowserModule,
    FormsModule 
  ],
})


属性型指令

属性型指令用于改变一个 DOM 元素的外观或行为


创建一个简单的属性型指令

<p appHighlight>Highlight me!</p>

创建指令文件

ng generate directive highlight


生成的 src/app/highlight.directive.ts 文件

并设置颜色

import { DirectiveElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(elElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}


响应用户引发的事件

把 HostListener 加进导入列表中,修改为

import { DirectiveElementRefHostListener } from '@angular/core';

为HostListener 装饰器添加两个事件处理器

constructor(private elElementRef) { }

@HostListener('mouseenter'onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave'onMouseLeave() {
  this.highlight(null);
}

private highlight(colorstring) {
  this.el.nativeElement.style.backgroundColor = color;
}


使用 @Input 数据绑定向指令传递值,修改为

import { DirectiveElementRefHostListenerInput } from '@angular/core';
@Input() highlightColorstring;



结构型指令

结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构,比如添加、移除或维护这些元素

*ngif

ngIf 指令并不是使用 CSS 来隐藏元素的。它会把这些元素从 DOM 中物理删除


*ngFor

用来遍历数据并动态的添加 DOM 元素


*ngSwitch 

 指令根据表达式显示或隐藏对应的部分

语法:

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>


明天计划:

学习使用angular的内置特性:如路由,客服端,表单


返回列表 返回列表
评论

    分享到