Angular の#（シャープ）がつく変数

Angular の#（シャープ）がつく変数

#iとかコンポーネントにいきなり出てくる変数はいったい何なんだ、と思ったりしませんか？

これはTypeScript の変数ではなく、Angular のローカル変数を意味する変数で、変数名の先頭に#を付加します。

例えばこの仕組みを利用してテキストボックスの入力値をローカル変数に格納することができます。そしてコンポーネントに直接渡すことが可能です。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
  `
  <input type="text" #val><br>
  <button (click)="onClick(val.value)">ボタン</button><br>
  <h6>{{msg}}</h6>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg:string;
  onClick(a:string){
    this.msg = a;
  }
}

上記はテキストボックスに値を入力してボタンをクリックすると、その値が表示されます。

これをローカル変数で実現しています。

TypeScriptの機能だと思っていた、けどドキュメント見ているとAngular の機能でした。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^