角材料输入未更新占位符文本

Question

我将Angular 6与来自material.angular.io的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

问题

首先，您的代码工作正常，并设置了public class Foo { public static final Bar BAR = initBar(20); private static Bar initBar(int value) { try { return new Bar(20); } catch (InvalidCharacterException e) { return null; } } } 的{​​{1}}框。屏幕上显示的是placeholder指令创建的input div。

修复

无论何时发出placeholder伪指令，我们都需要更改matInput中的matInput placeholder，以便更改attribute`div。

  

请按照以下步骤更改MatInput的{​​{1}}属性

1。将matInput的引用设置为placeholder

在html中设置matInput的引用，以便可以在placeholder MatInput中对其进行访问。

#matInput="matInput"

2。更改translate模型中的directive。

访问 <input type="text" matInput #matInput="matInput" placeholder="Original Placeholder" [(ngModel)]="user.username" translate="placeholder"> 指令中的placeholder指令

matInput

更改matInput的占位符

translate

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

Answer 2

要更改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 3

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

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