web-dev-qa-db-ja.com

ディレクティブを動的に追加する方法は？

動的に追加する方法（注入する）ホストへのディレクティブ？

MyTooltipディレクティブがあり、そのホストにmdTooltipディレクティブを追加したいと思います。 _ElementRef.nativeElement_のsetAttribute()を試しましたが、mdTooltipディレクティブは作成されません。

mytooltip.directive.ts：

_@Directive({
  selector: '[my-tooltip]',
  Host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (Host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (Host) */
  }
}
_

ホストとは、myTooltipディレクティブを持つ要素を意味します。

_<span my-tooltip="tooltip hint">Click here</span>
_

結果はhtmlより上では変わりませんが、mouseenterではmd-tooltipディレクティブがspanにあります。

ところで、直接md-tooltipではなくラッパーを使用している理由は、後で表示遅延を変更し、遅延を非表示にし、他の手段でもマテリアルツールチップの動作をカスタマイズするためです。

編集どうやらディレクティブを動的に追加することは現在サポートされていません:(

angulartypescriptangular2-directives
25
RichieRock

それは角度で求めている機能です...これを読んでください： https://github.com/angular/angular/issues/8785

それを行うための迅速で汚い方法は、以下を使用することです：

myHilite（テキストを強調表示する）という名前のディレクティブがあり、MainComponent.tsという名前のコンポーネントもあります。 MainComponent.tsに次のコード行を追加しました...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite();
}

ディレクティブにパラメーターが必要な場合...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite(this.elementRef);
}

ディレクティブは、ライフサイクルフックの1つでコードを実行する必要がある場合があります。このように、親コンポーネントのライフサイクルフックメソッドでディレクティブのライフサイクルフックメソッドを手動で呼び出します...

export class MainComponent {
    //...code...

    ngOnInit(){
        this.myHiliteDirective.ngOnInit();
    }
}
22
btinoco