angular8カスタムパイプライン、指令値と取得DOM

バージョン：

1、カスタムパイプライン：

例：* ngForキー値を定義するコンジットを取得することができます

keyObject.pipe.ts

// キー値管道 
「@角度/コア」からインポート{パイプ、PipeTransform} 。

@Pipe（{ 
    名： 'getKeys' 
}）

エクスポートクラスkeyValueの器具PipeTransform { 
    変換（値、引数：文字列[]）：任意{ 
        せキー = [];
        以下のために（キーせにおける{Object.keys（値））
            はconsole.log（キー）。
            keys.push（{キー：キー、値：値[キー]}）。
        } 
        リターンキー。
    } 
} 

// 使用操作
/ * 
ステップ1  
    app.module.ts引入
    './common/keyObject.pipe'からインポート{keyValueの}。
    @NgModule（{
      宣言：
        keyValueの、
      ]、
ステップ2 
    //循环的时候使用
    //原始值[{名： ''、ポイント''}] 
    //转换的值[{キー：0、値：{名： '' 、点： ''}}] 
    <DIV * ngFor = "せchipsListの項目| getKeys"> {{item.value.name}}の<input type = "番号"ステップ= "0.01"最小"0" 
        [値] = "item.value.point"（変化）= "this.changeValue（item.key）;" クラス= "inputClass" /> </ DIV> 
    
* /

2、カスタム命令：

例：命令タグにハイライト表示を定義します

highLight.ts

// ハイライト指令 
'@角度/コア'からインポート{指令、ElementRef、HostListener、入力} 。

@Directive（{ 

  セレクタ： '[appHighlight]' 

}）

エクスポートクラスHighlightDirective { 

@Input（ 'appHighlight'）highlightColor：文字列。  // highlightColor是appHighlight指令的别名

  コンストラクタ（プライベートEL：ElementRef）{ 
  //   el.nativeElement.style.backgroundColor = '黄色'。
  } 
  プライベートハイライト（色：文字列）{ 
    この .el.nativeElement.style.backgroundColor = 色。
  } 
  @HostListener（ 'のMouseEnter' ）onMouseEnter（）{
    この .highlight（この.highlightColor）; 
  } 

  @HostListener（ 'MouseLeave' ）onMouseLeave（）{
     この .highlight（NULL ）; 
  } 
} 

// オペレーティング使用
/ * 
ステップ1。
    app.module.ts導入
    インポート{HighlightDirective}から」。 /普通/ハイライト'; 
    @NgModule（{ 
      宣言：[ 
        HighlightDirective、
      ]、
ステップ2 
    ハイライト使用してタグの対
    this.color ='「イエロー; // TSファイルは、カラー定義
    <P [appHighlight] = "色 "> </をp型> 
    
* /

3、ネイティブのコンテンツを使用してHTML DOM

例：入力ボックス値の値を求めます

古いスタイル：document.getElementsByClassName（ 'inputClass'）[インデックス]）の値は、値が、エラー出力コンソール、およびパッケージの失敗を取得することができる。
正しい言葉遣い：<HTMLInputElementの> document.getElementsByClassName（ 'inputClass '）[ 値を取得することができるように、コンソールがエラーではないインデックス]）。値は、エラーがパッケージ化されません

<HTMLImageElement>の同様に取得された画像のsrc属性

angular8カスタムパイプライン、指令値と取得DOM

おすすめ