javascript - 触发angular2中元素的焦点

Question

我有一个组件(Angular 4.1.0)-

<div id="create1" style="height: auto" materialize>
 <div class="input-field" style="height: auto">
   <textarea id="**create-post**" class="materialize-textarea"></textarea>
   <label for="create-post">Write something ...</label>
 </div>
 <div class="card-action">
  <a class="left"><i class="material-icons">**close**</i> </a>
  <a class="right">Post</a>
 </div>

1.所以问题是当我关注 [create-post] 元素时，它也应该触发 [close] 元素，否则 [ close] 元素应该被隐藏。

组件 css 有这个 -

.input-field textarea:focus {
border-bottom: 1px solid #00b8d4;
box-shadow: 0 1px 0 0 #00b8d4;
**height**: 400px;}

2.虽然高度:400px但是当textarea的内容增加时它也应该增加它的高度!内容不应该变成可滚动的，而 textarea 应该增加它的高度 任何人都知道如何实现这一点？

Answer 1

您可以直接在模板中以 Angular 绑定(bind)到焦点事件，并将其连接到 javascript 以执行您需要执行的任何操作。

<textarea id="**create-post**" (focus)="doWhatsNeeded()"></textarea>

然后在你的组件中声明函数:

doWhatsNeeded(){
    //do something
}