カスタム命令を理解するための例としてツールチップを使用した Angular 学習

以前の記事では、 Angularの概要を説明しました。カスタム命令の部分では記述できるようになりましたが、実際のシナリオではまだ標準化された管理が必要です。

Angular は Angular.js のアップグレードされたバージョンです。 【おすすめ関連チュートリアル：「Angularチュートリアル」】

そこで今回はTooltipを使ってカスタム命令の内容を解説していきます。

オンライン レンダリングは次のとおりです。

ディレクトリ構造は

、前の記事で実装したコード プロジェクトに基づいています。 コマンド ラインを実行します。

# ディレクティブ フォルダーに入力します。 $ cd directives

#ツールチップ フォルダーの作成$ mkdir ツールチップ

# ツールチップフォルダーに入る $ cd toolstip

# ツールチップコンポーネントを作成 $ ng コンポーネントのツールチップを生成

# ツールチップ ディレクティブの作成 $ ng ディレクティブのツールチップの生成

上記のコマンド ラインを実行すると、次のようにapp/directive/tooltipのファイル ディレクトリ構造が取得されます

。
§──tooltip //ツールチップコンポーネント │ ├── user-list.component.html // ページのスケルトン │ §── user-list.component.scss // ページの独自のスタイル │ §── user-list.component.spec .ts // テストファイル │ └── user-list.component.ts // javascript ファイル §── tooltip.directive.spec.ts // テストファイル └── tooltip.directive.ts // ディレクティブファイル

さて、ここで主に管理を容易にするために、コンポーネントをtooltipと同じレベルに配置しました。もちろん、これは人によって異なりますが、パブリックcomponentsフォルダーに置くことができます。

htmlファイルに

ツールチップ コンポーネントを記述します

<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div>

スタイル ファイル.scssには、次の内容があります。

$black: #000000;
$white: #ffffff;
$caret-size: 6px;
$tooltip-bg:transparentize($black, 0.25); // 透明化は sass の構文です $grid-gutter-width: 30px;
$body-bg-color: $white;
$app-anim-time: 200ms;
$app-anim-curve: イーズアウト;
$std-border-radius: 5px;
$zindex-max: 100;

// :host 擬似クラス セレクター、コンポーネント要素自体のスタイルを設定します: host {
  位置: 固定;
  パディング: $grid-gutter-width/3 $grid-gutter-width/2;
  背景色: $tooltip-bg;
  色: $body-bg-color;
  不透明度: 0;
  遷移: すべて $app-anim-time $app-anim-curve;
  テキスト整列: 中央;
  境界半径: $std-border-radius;
  z インデックス: $zindex-max;
}

.caret { // キャレット幅: 0;
  高さ: 0;
  境界左: 6 ピクセルの実線透明。
  境界線右: 6 ピクセルの実線透明。
  border-bottom: 6px ソリッド $tooltip-bg;
  位置: 絶対;
  上: -$caret-size;
  左: 50%。
  マージン左: -$caret-size/2;
  ボーダーボトムカラー: $tooltip-bg;
}

うーん、 cssって不思議なものですね。sass sassの内容については記事を組んで解説していきます...

そして

、 javascriptファイルtooltip.component.tsの内容は以下の通りです。

 
  成分、 
  ElementRef, //要素は HostBinding を指します, 
  破壊時、 
  OnInit 
'@angular/core' から;

@成分（{
  selector: 'app-tooltip', // コンポーネントの名前を示す識別子、ここに app-tooltip があります
  templateUrl: './tooltip.component.html', // このコンポーネントのスケルトン styleUrls: ['./tooltip.component.scss'] // このコンポーネントのプライベート スタイル})
エクスポート クラス TooltipComponent は OnInit を実装します {

  public data: any // ディレクティブに値を割り当てます。

  // コンポーネント自体のホスト バインディングに関連するデコレータ @HostBinding('style.top') hostStyleTop!: string;
  @HostBinding('style.left') hostStyleLeft!: 文字列;
  @HostBinding('style.opacity') hostStyleOpacity!: 文字列;

  コンストラクタ（
    プライベート要素参照: ElementRef
  ) { }

  ngOnInit(): void {
    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }

    this.displayTimeOut = setTimeout((_: any) => {
      // ここでツールチップと左側の間の距離を計算します。計算式は次のとおりです。tooltip.left + 対象要素の .width - (tooltip.width/2)
      this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'
      this.hostStyleOpacity = '1';
      this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'
    }、500)
  }
  
  
  // コンポーネントは破棄されます ngOnDestroy() {
    // コンポーネントが破棄された後、メモリ リークを防ぐためにタイマーをクリアします if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }
  }

、

ツールチップの指示を記述すること

に焦点を当てます。コード上の特定の指示にマークを付けます。

関連するファイルtooltip.directive.tsの内容は次のとおりです

。 
  ApplicationRef, // グローバル呼び出し検出 ComponentFactoryResolver, // コンポーネント オブジェクトを作成します ComponentRef, // ComponentFactory ディレクティブによって作成された要素を指す、コンポーネント インスタンスの関連付けとガイダンス、ElementRef, 
  EmbeddedViewRef, // EmbeddedViewRef は ViewRef を継承し、テンプレート要素で定義された UI 要素を表すために使用されます。
  HostListener, // DOM イベント リスニング Injector, // 依存性注入 Input 
'@angular/core' から;

import { TooltipComponent } から './tooltip/tooltip.component';

@指令（{
  セレクター: '[appTooltip]'
})
エクスポート クラス TooltipDirective {
  @Input("appTooltip") appTooltip!: 文字列;

  プライベートコンポーネントRef!: ComponentRef<TooltipComponent>;

  // 対象要素の左、右、上、下などの相対位置を取得します。
  get elementPosition() {
    this.elementRef.nativeElement.getBoundingClientRect() を返します。 
  }

  コンストラクタ（
    保護された要素参照: 要素参照、
    保護された appRef: ApplicationRef、
    保護されたcomponentFactoryResolver: ComponentFactoryResolver、
    保護されたインジェクター: インジェクター
  ) { }

  //ツールチップを作成する
  protected createTooltip() {
    this.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // ツールチップをバインドします。component.create(this.injector);

    this.componentRef.instance.data = { // バインドデータ data content: this.appTooltip,
      要素: this.elementRef.nativeElement、
      elementPosition: this.elementPosition
    }

    this.appRef.attachView(this.componentRef.hostView); // ビュー const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] を HTMLElement として追加します。
    document.body.appendChild(domElem);
  }
  
  // ツールチップを削除
  protected destroyTooltip() {
    if(this.componentRef) {
      this.appRef.detachView(this.componentRef.hostView); // ビューを削除します this.componentRef.destroy();
    }
  }
  
  // @HostListener('mouseover') へのマウスの動きをリッスンします
  OnEnter() {
    this.createTooltip();
  }
    
  // マウスの動きをリッスン out@HostListener('mouseout')
  OnOut() {
    this.destroyTooltip();
  }

この

時点で、関数の99%が完了しました。これで、ページ上で関数を呼び出すことができます。

このページでは、

次のコンテンツをuser-list.component.htmlに追加するよう呼び出します:

<p style="margin-top: 100px;">
  <!-- [appTooltip]="'Hello Jimmy'" が重要なポイントです -->
  <スパン 
    [appTooltip]="「こんにちは、ジミー」" 
    style="margin-left: 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px Solid #999;"
  >ジミー</スパン>
</p>

app.module.tsでTooltipDirective命令を宣言したので、それを直接呼び出すことができます。現在の効果は以下の通りです。

実装したtooltip中央下部に表示されます。これは、 angular ant designのtooltipのbottom属性など、フレームワークで通常使用するものです。他の属性については、読者が興味がある場合は拡張できます。

この時点で、作成した命令ファイルを適切に維持できます。