角度材質輸入不更新占位符文本

Question

我正在使用來自 material.angular.io 的帶有 Material CSS 的 Angular 6

我正在嘗試創建將提供翻譯的指令。

<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];
      }
    )
  }

}

添加 stackblitz 代碼

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

問題

首先，您的代碼工作正常並設置了input框的placeholder 。 您在屏幕上看到的是由matInput指令創建的div placeholder 。

使固定

無論何時發出matInput指令，我們都需要更改MatInput的placeholder attribute ，以便它更改placeholder `div。

按照步驟更改MatInput的placeholder屬性

1.設置matInput的引用為#matInput="matInput"

在 html 中設置 matInput 的引用，以便它可以在translate directive訪問。

 <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();
  }