Question

考虑我的html：

  <md-input-container>
    <input mdInput myCustomDirective
      formControlName="email"
    >
  </md-input-container>

在我的自定义指令中，我想设置占位符。

我尝试了这样的天真代码而失败了：

@Directive({
  selector: '[myCustomDirective]',
})
export class MyCustomDirective implements OnInit, AfterViewInit {


  constructor(
    private elementRef: ElementRef,
    private renderer2: Renderer2,
  ) {}

  ngAfterViewInit() {
    this.renderer2.setAttribute(
      this.elementRef.nativeElement,
      'placeholder',
      'test',
    );
  }
}

我是否将setAttribute代码放在构造函数或任何生命周期钩子中似乎无关紧要。

还有另一种我没想过的方法吗？

我正在使用反应形式和OnPush变化检测策略，如果这有任何区别。

Answer 1

这似乎有用，虽然它非常hacky（因为MdInputDirective的占位符字段实际上是一个输入）。虽然，任何势在必行的解决方案对我来说都很糟糕。

import {MdInputDirective} from '@angular/forms';

@Directive({
  selector: '[myCustomDirective]'
})
export class MyCustomDirective {
  constructor(@Self() private input: MdInputDirective) {}

  ngAfterViewInit() {
    this.input.placeholder = 'test';
  }
}

另一种解决方案可能是这样的：将你的指令放在md-input-container元素而不是input元素上，然后创建一个myCustomDirectivePlaceholder组件，它注入myCustomDirective以获取所需的字符串，并像这样使用它们： / p>

<md-input-container myCustomDirective>
  <input mdInput>
  <md-placeholder>
    <myCustomDirectivePlaceholder></myCustomDirectivePlaceholder>
  </md-placeholder>
</md-input-container>

自定义指令可以使用角度材料2为输入设置占位符吗？

1 个答案: