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

Question

I am using Angular 6 with Material CSS from material.angular.io

I am trying to create my directive that will offer translation.

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

is working fine as the text inside tags are getting translated.

To translate the attribute placeholder

Below is working

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

Below is not working

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

It is because of input matInput attribute, that is not taking the updated value.

What are the possibilities i could update the matInput attributes. I action hook i use on directive is ngAfterViewInit

Thanks.

EDIT 1 - TRANSLATE DIRECTIVE 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

To change the placeholder in a matInput use mat-placeHolder, like

<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

Issue

First of all your code is working fine and setting the placeholder of input box. What you see on the screen is the div placeholder created by matInput directive.

Fix

Whenever matInput directive is issued, we need to change the placeholder attribute of MatInput so that it will change the placeholder `div.

Follow the steps to change the placeholder property of MatInput

1. Set the reference of matInput as #matInput="matInput"

Set the reference of matInput in html so that it can be accessed in the translate directive .

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

2. Change the placeholder of matInput model.

Access the matInput directive in translate directive

 @ContentChild("matInput") matInput : MatInput;

Change the placeholder of matInput

this.matInput.placeholder = "Translated placeholder";

Working copy is here https://stackblitz.com/edit/angular-q1ufxj

Answer 3

In my case only something like that helped:

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