Angular2 - テキスト値の選択部分を取得

Question

たとえば、選択したテキストを太くするための簡単なエディタを作成したいと考えています。

"スーパーテキスト"値のテキストエリアがあります。

ここでは、このテキストの一部（「スーパー」など）を選択します。選択した値を取得するには？

<textarea (selected)=".."></textarea> 

これは、テキストエリア内で何かを選択するたびに関数を呼び出します。

<textarea (selected)="view(textarea.value)" #textarea></textarea> 

これは、何かを選択すると、テキスト領域全体の値を出力します。私は選択されるテキストの部分だけを印刷したいと思います。どうやってするか？

Answer 1

あなたは関数をテキサスの（selected）属性でバインドしていることがわかります。これは、選択のために発生するイベントであるため、（選択する）必要があります。しかし、コールバックが実行されていると言うので、私はそのタイプミスを想定します。

今、主な質問です。テキストエリアには、selectionStartとselectionEndという2つのプロパティがあります。これは、名前が示すように、選択の開始と終了の値の位置のインデックスです。したがって、使用して選択した部分文字列を得ることができます

textarea.value.substring(textarea.selectionStart, textarea.selectEnd) 

コンポーネントの関数内で式の値を渡すことができます。したがって、あなたはこのようになります

<textarea (select)="view(textarea.selectionStart, textarea.selectEnd)" #textarea></textarea> 

これは同じもののために働くフィドルです。 https://jsfiddle.net/h191w4ed/1/