web-dev-qa-db-ja.com

Angular 4コンポーネントからのディレクティブメソッドの呼び出し

私は、セレクターを使用して（静的）またはパブリックメソッドを呼び出して（動的に）呼び出される親DOM構造を変更する構造ディレクティブを作成しようとしています。

  • Htmlテンプレートでディレクティブセレクタを使用しても問題なく機能します。

  • テンプレートで使用せずにディレクティブメソッドを呼び出して同じことを達成できるかどうかを把握しようとしています。

my-directive.ts

@Directive({ selector: '[sampleDirective]' })

export class SampleDirective {
    ...
   constructor(..) {
        this.customDirective();
     }
  }
customDirective() {
    console.log('Inside customDirective()');
}

my-component.ts

import { SampleDirective } from './my.directive';
...
@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>`
})
constructor() { }
..
click() {
  // call directive method here
}

ディレクティブを使用して実行時にコンポーネントのDOM構造を変更する汎用ソリューションを作成しているため、これが必要です。

**タイプミスがある場合は無視してください。ここに完全なコードを貼り付けることができなかったことを申し訳ありません

angularangular-directiveangular-components
10
mperle

コンポーネントテンプレートにディレクティブがない場合、Angularは処理しません。ng-containerタグを使用すると、テンプレートが乱雑になることはありません。ディレクティブを取得するには、@ViewChildren/@ViewChildを使用してディレクティブのインスタンスを取得します：

@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>
            <ng-container sampleDirective></ng-container>`
})
@ViewChildren(SampleDirective) dirs;
constructor() { }
..
click() {
   this.dirs.first.customDirective();
  // call directive method here
}
14
Maxim Koretskyi

コンポーネントからディレクティブメソッドを呼び出すには、ViewChildデコレーターを使用して、ページ上のディレクティブインスタンスを見つけることができます。次に、同じものを使用して、すべての小道具のディレクティブにアクセスできます。

@ViewChild(SampleDirective) directive;
constructor() { }
..
click() {
  // call directive method here
  this.directive.customDirective()
}
0
Pankaj Parkar