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

【问题标题】：Angular 4 call directive method from component来自组件的Angular 4调用指令方法
【发布时间】：2018-02-07 09:52:27
【问题描述】：

我正在尝试构建一个结构指令，该指令将通过使用其选择器（静态）或调用其公共方法（动态）来更改父 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 结构。

** 如有错别字请忽略。抱歉，我无法在此处粘贴完整的代码

【问题讨论】：

模板中没有该指令是不可能的。你想要的是一个辅助方法/类而不是指令。
你能给我举个例子吗？

标签： angular angular-directive angular-components

【解决方案1】：

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

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

【讨论】：

感谢您的回答。我试过这个解决方案。但是，我收到控制台错误“无法读取未定义的属性 customDirective”
@mperle 你能告诉我，你把sampleDirective放在哪里了吗？
你的意思是指令文件的位置还是？
@mperle 好吧，我的意思是说你在 HTML 上使用指令的地方？
不，这就是问题所在。我不想在任何模板中使用它。我想调用该方法对dom进行更改。那可能吗？我已经更新了问题。

【解决方案2】：

如果组件模板中没有指令，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
}

【讨论】：

谢谢。我们可以不用额外的 div 元素吗？但是，即使使用上述解决方案，我也没有得到预期的结果。
您需要将指令应用于某些元素。您可以使用ng-container 而不是div，它会呈现为评论。你是什么意思你没有得到预期的结果？ this.dirs.length 是什么？你什么时候打电话给click()？
我已经更新了我的问题。如果我们能达到要求，请检查并提供给我。
@mperle，如果组件模板中没有指令，Angular 将不会处理它。为什么要求在模板中不使用指令？使用ng-container 标签，您不会以任何方式弄乱模板
@mperle，有什么意见吗？