如何使用 Angular4 创建额外的占位符属性？答案

【问题标题】：How can I create an additional placeholder attribute using Angular4?如何使用 Angular4 创建额外的占位符属性？
【发布时间】：2018-04-13 01:06:26
【问题描述】：

我在一个项目中使用Angular Material。在该项目中，我有一个使用autocomplete 组件的表单。一切正常 - 但是，我想在用户关注输入元素时添加占位符文本。

这是我的 html 模板：

<input type="search" matInput placeholder="My Placeholder"
     aria-label="My Placeholder"
     [matAutocomplete]="mySearch"
     [formControl]="myCtrl"
     (focus)="onInputFocus()"
     [(ngModel)]="myModel">

在我的.ts 文件中，我有这个方法：

public onInputFocus(event: Event): void {
    // do stuff
}

Angular Material 使用占位符属性并在运行时将其转换为标签元素。我希望实际的占位符属性说“我的占位符”以外的其他内容。

例如，如果用户点击输入，“我的占位符”会向上移动，并且“搜索”一词会显示为占位符文本。

我考虑过使用 css 来设置背景图片，或者创建自定义数据属性。或者在.ts 文件中动态创建？？显示占位符文本。有没有其他人遇到过这个问题？

感谢您的任何建议！

【问题讨论】：

注意：对于 AngularJS，请参阅：stackoverflow.com/a/63917781/4539906

标签： angular angular-material2

【解决方案1】：

你可以像这样绑定到placeholder

<input type="search" matInput [placeholder]="placeholderText">

然后在你的课堂上，

placeholderText = 'My Placeholder';

updatePlaceholderText() {
  this.placeholderText = 'Search';
}

【讨论】：

【解决方案2】：

谢谢你，@Will Howell - 这让我走上了我认为的正确道路。我最终做的是添加一个新属性“真实占位符”并对其进行操作。

template.html

<input type="search" real-placeholder="Search" placeholder="My Placeholder"
(focus)="onInputFocus($event)" (blur)="onInputBlur($event)">

component.ts

/**
* Input focus event listener.
* @param {Event} event
*/
public onInputFocus(event: HTMLSelectElement): void {
    const placeholder = event.target.getAttribute('real-placeholder');
    event.target.setAttribute('placeholder', placeholder);
}

/**
* Input blur event listener.
* @param {Event} event
*/
public onInputBlur(event: HTMLSelectElement): void {
    event.target.setAttribute('placeholder', '');
    if (event.target.value !== '') {
        event.target.setAttribute('style', 'opacity:1;');
    }
}

component.scss

[real-placeholder] {
    opacity: 0;
    -webkit-transition: opacity 0.4 ease-in-out;
    transition: opacity 0.4 ease-in-out;

    &:focus {
        opacity: 1;
    }
}

上面将像传统的html占位符属性一样将“搜索”一词放置在输入区域中。我添加了一些更好的 css 以使“搜索”淡入与打开/关闭。

希望这对其他人有帮助！

【讨论】：