Question

我正在尝试构建一个结构指令，它将通过使用其选择器（静态）或通过调用其公共方法（动态）来调用父DOM结构。

在html模板中使用指令选择器可以正常工作任何问题。
我试图弄清楚我们是否在模板中使用它并通过调用指令方法来实现相同目的。

我-directive.ts

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

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

我-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结构。

** 如果有任何拼写错误，请忽略。抱歉我无法粘贴完整的代码

Answer 1

如果组件模板中没有指令，Angular将不会处理它。使用FAIL __tests__/App.test.js ● can add an item to an order TypeError: Cannot read property 'items' of undefined at Store.<anonymous> (src/stores/orderStore.js:32:18) at executeAction (node_modules/mobx/lib/mobx.js:867:19) at Store.res (node_modules/mobx/lib/mobx.js:858:16) at _stores2.default.orderStore.fetchOrders.then (__tests__/App.test.js:28:61) at process._tickCallback (internal/process/next_tick.js:103:7) ✕ can add an item to an order (10ms) ✓ loads the orders (4ms) ✓ loads the items (5ms) Test Suites: 1 failed, 1 total Tests: 1 failed, 2 passed, 3 total Snapshots: 0 total Time: 0.334s, estimated 1s Ran all test suites.代码，您不会以任何方式混淆模板。要获取该指令，请使用ng-container来获取指令的实例：

@ViewChildren/@ViewChild

Answer 2

要从组件调用指令方法，可以使用ViewChild装饰器在页面上查找指令实例。然后通过使用相同的，您可以访问指令所有道具。

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

来自组件的Angular 4调用指令方法

2 个答案: