Angular 中的 JavaScript |事件绑定(bind)

Question

我有一个 Twitter Bootstrap 表单，当它获得焦点时，它会获得橙色边框底部。但是输入行上的图标有自己的边框底部，我不知道如何将 Angular 中的焦点事件绑定(bind)到使图标的边框底部也变为橙色的函数。

<form>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text" id="emailInputIcon"><i class="fal fa-envelope"></i></div>
            </div>
            <input type="email" class="form-control" id="emailInputLogin" aria-describedby="emailHelp" placeholder="EMAIL">
        </div>
     </div>
     <div class="form-group">
         <div class="input-group">
             <div class="input-group-prepend">
                 <div class="input-group-text" id="passwordInputIcon"><i class="fal fa-key"></i></div>
             </div>
             <input type="password" class="form-control" id="passwordInputLogin" placeholder="PASSWORD">
         </div>
     </div>
 <button type="submit" class="btn btn-primary">Login</button>
</form>

Answer 1

一个简单的方法就像这样(为了可读性而简化):

HTML:

<input (focus)="onInputFocused()" (blur)="onInputBlurred()" />
<div class="icon" #icon></div>

TS:

@ViewChild('icon') icon: ElementRef;

onInputFocused() {
    this.icon.nativeElement.style.borderBottom = 'orange 1px solid';
}
onInputBlurred() {
    this.icon.nativeElement.style.borderBottom = '';
}

<小时/>

更优雅:

HTML:

<input (focus)="onInputFocused()" (blur)="onInputBlurred()" />
<div class="icon" [ngClass]={'withBorder': focused}></div>

TS:

focused = false;
onInputFocused() {
    this.focused = true;
}
onInputBlurred() {
    this.focused = false;
}

CSS:

.withBorder {
    border-bottom: orange 1px solid;
}

<小时/>

没有 Angular，纯 CSS 解决方案(首选):

HTML:

<div class="has-input">
    <input type="text" />
    <div class="icon"></div>
</div>

CSS:

.has-input input:focus + .icon {
    border-bottom: orange 1px solid;
}