版本:
1、自定義管道:
example: 定義一個*ngFor 可以獲取key值的管道
keyObject.pipe.ts
// key value 管道 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'getKeys' }) export class keyValue implements PipeTransform { transform(value, args: string[]): any { let keys = []; for (let key in Object.keys(value)) { console.log(key); keys.push({ key: key, value: value[key] }); } return keys; } } // 使用操作 /* step 1 app.module.ts 引入 import { keyValue } from './common/keyObject.pipe'; @NgModule({ declarations: [ keyValue, ], step 2 // 循環的時候使用 // 原始值[{name: '', point: ''}] // 轉換的值[{key:0 , value:{name: '', point: ''}}] <div *ngFor="let item of chipsList | getKeys">{{item.value.name}}<input type="number" step="0.01" min="0" [value]="item.value.point" (change)="this.changeValue(item.key);" class="inputClass" /></div> */
2、自定義指令:
example:定義一個移入標簽高光顯示的指令
highLight.ts
// highlight指令 import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { @Input('appHighlight') highlightColor: string; //highlightColor是appHighlight指令的別名 constructor(private el: ElementRef) { // el.nativeElement.style.backgroundColor = 'yellow'; } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } } // 使用操作 /* step 1 app.module.ts 引入 import {HighlightDirective} from './common/highLight'; @NgModule({ declarations: [ HighlightDirective, ], step 2 對某標簽使用高光 this.color = 'yellow'; // ts文件定義顏色 <p [appHighlight] = "color"></p> */
3、使用原生html dom的內容
example: 獲取input框的value值
原來的寫法:document.getElementsByClassName('inputClass')[index]).value 值可以獲取到,但是控制台會輸出error,而且打包會失敗
正確的寫法:<HTMLInputElement>document.getElementsByClassName('inputClass')[index]).value 這樣也可以獲取到值,控制台沒有error,打包也不會報錯
同理 獲取image 的src 屬性 <HTMLImageElement>