角度材质输入不更新占位符文本

Question

我正在使用来自 material.angular.io 的 Angular 6 和 Material CSS

我正在尝试创建将提供翻译的指令。

<span translate>page.login.btnsubmit</span>

标签内的文本正在翻译，工作正常。

翻译属性占位符

以下工作正常

<input type="text" translate="placeholder" placeholder="newworld">

以下不工作

<input type="text" matInput placeholder="Username / Email / Mobile" value="" translate="placeholder">

由于输入 matInput 属性，没有取更新值。

我可以更新 matInput 属性的可能性有哪些。我在指令上使用的动作钩子是 ngAfterViewInit

谢谢。

编辑 1 - 翻译指令 TS

import { Directive, ElementRef, Input } from '@angular/core';
import * as _ from 'lodash';
import { TranslateService } from '../services/translate.service';

@Directive({
  selector: '[translate]'
})
export class TranslateDirective {

  @Input('translate') referrer:string;

  constructor(private el: ElementRef, private ts: TranslateService) {

  }

  ngAfterViewInit() {
    if(_.isEmpty(this.referrer)){ // executed for text between the tags example: <span translate>page.login.username</span>
      this.translateInnerHtml()
    }else{ // executed for attributes
      this.translateAttribute();
    }
    return;
  }

  translateAttribute(){ // Not updating
    this.el.nativeElement.attributes.placeholder.value="dynamic placeholder";
  }

  translateInnerHtml(){ // Working fine as expected
    const innerHtml = this.el.nativeElement.innerHTML;
    if (_.isEmpty(innerHtml)) {
      this.el.nativeElement.innerHTML = 'No text provided for translation';
      return;
    }
    this.getTranslationText(innerHtml)
  }


  getTranslationText(text){
    let splitText = _.split(text, '.');
    let key = _.join(splitText.slice(-1));
    let file = _.join(splitText.slice(-2, -1));
    let folder = _.join(splitText.slice(0, splitText.length - 2), '/');
    if (_.isEmpty(key) || _.isEmpty(file) || _.isEmpty(folder)) {
      this.el.nativeElement.innerHTML = 'No text provided for translation';
      return;
    }
    this.ts.get(folder, file).subscribe(
      (data) => {
        if (_.isEmpty(data) || _.isEmpty(data[key])) {
          this.el.nativeElement.innerHTML = 'No text provided for translation';
          return;
        }
        this.el.nativeElement.innerHTML = data[key];
      }
    )
  }

}

Adding stackblitz code

Answer 1

要更改 matInput 中的占位符，请使用 mat-placeHolder，例如

<mat-form-field class="username">
     <input type="text" matInput [(ngModel)]="user.username" >
     <mat-placeholder>
        <span translate>page.login.btnsubmit</span>
     </mat-placeholder>
</mat-form-field>

Answer 2

问题

首先，您的代码工作正常并设置了 placeholder 的 input 框。你在屏幕上看到的是由matInput 指令创建的div placeholder。

修复

每当matInput指令发出时，我们需要改变MatInput的placeholderattribute，这样它就会改变placeholder`div。

按照步骤更改MatInput 的placeholder 属性

1。设置matInput的引用为#matInput="matInput"

在html中设置matInput的引用，以便可以在translatedirective中访问。

 <input type="text" matInput #matInput="matInput" placeholder="Original 
     Placeholder" [(ngModel)]="user.username" translate="placeholder"> 

2。更改matInput 模型的placeholder。

访问translate指令中的matInput指令

 @ContentChild("matInput") matInput : MatInput;

更改matInput的占位符

this.matInput.placeholder = "Translated placeholder";

工作副本在这里https://stackblitz.com/edit/angular-q1ufxj

Answer 3

就我而言，只有这样的帮助：

ngAfterViewChecked(): void {
    this.setPlaceHolder();
  }