Angular2 for TypeScriptのお勉強-sample(10)【NgForm and template reference variables、{{}}と[]、""の違いとか】

今日はちょっと長い。

チュートリアルでいうここを読んでます

submitでわたされるのはngFormというオブジェクトみたいです。

template側

<form #theForm="ngForm" (ngSubmit)="onSubmit(theForm)">
<label for="name">Name</label>
<input required ngControl="firstName" [(ngModel)]="current.firstName">
{{current.firstName}}
<button type="submit" [disabled]="!theForm.form.valid">submit</button>
</form>

太字で示したtheFormとはHTMLFormElementです。

ngFormとはそのHTMLFormElementをNgFormとしてラップしたAngularのビルドインディレクティブです。

上記のコードはonSubmitとしてsubmit時theFormを渡しています。

Component側
export class ChildComponent {
onSubmit(formValue){
console.log(formValue);
}
}
で受け取り、

console出力してみました。

template側の記述に「ngControl="firstName" 」としているところがあると思います。

inputにng-controls="firstName"とすると
そのオブジェクトから参照できます

Input and output properties

This section concentrates on binding to targets, which are directive properties on the left side of the binding declaration. These directive properties must be declared as inputs or outputs.

bindingへのターゲット(=の左側にあるdirectiveプロパティ)は出力か入力として宣言されなければならない

データバインディングターゲットとデータバインディングソース

コード上「=」の左側にあるのがデータバインディングターゲット。

それらは[]か()、もしくは[()]される。

コード上「=」の右側にあるのがデータバインディングターゲット。

それらは""か{{}}される必要がある。

データバインディングソースは自動的にbindingされているので、特別にdirectiveのメンバーにtemplate expression({{}}。二重ブラケット)やstatement(""。二重符)の中でアクセスする必要はない

ちょっと脱線してAngular2によるデータの流れ

データの流れは3種類。
チュートリアルのここをよんでいます。

１．One-way from data source to view target(データソースからビューターゲットへの一方通行)

・{{expresson}}
・[target] = "expression"
・bind-target = "expression"

bindingできるタイプ
・Interpolation
・・Property
・Attribute
・Class
・Style
※PropertyとAttributeの違いが分からない方はこちら
※Interpolationというのはtemplate文中で{{}}で描画しているところですかね。それが直接component propertyを参照している
Interpolationは最初にAngular

２．One-way from view target to data source(ビューターゲットからデータソースへの一方通行)

・(target) = "statement"
・on-target = "statement"
ここで出てくるstatementと上のexpressionの違い
template-expressionのターゲットはhtml要素かcomponentか、directive。{{1+1}}。インターポレーションの中にかいた「1+1」の部分ね。
これらは評価して値をターゲットに返していますね。以前の記事参照

template-statementはここによると
componentやディレクティブ、要素にbindeingされたイベントに対応する。

例(event)="statement"
ここの左部分でevenｔをハンドリングするってことかな。

「この方法以外でイベントに対応するのは意味がない」と書かれています。

Responding to events is the other side of Angular's "unidirectional data flow". We're free to change anything, anywhere, during this turn of the event loop.
イベントの定義はAngularのdirective data flowの管理外。イベントループの間、どこでも自由に変えられる。

template expressonと statementの解析は異なる。
statementの方はJavaScriptのような「=」の代入や「;」や「,」が使える
だがstatement内で下記は使えない
・new
・increment and decrement operators, ++ and --
・operator assignment, such as += and -=
・the bitwise operators | and &
・the template expression operators

template statement　は window、document、console、Math等の参照はもっていない。

(click)="onSave()"
こう書かれていたら、onSaveはcomponentのインスタンスメソッドにdata-bindingされているメソッドです。
それは
昨日の記事のようにobjectを渡すことができる:see

３．Two-way

・[(target)] = "expression"
・bindon-target = "expression"

※後日postします。

今日は長かったね〜。疑問点追っていったらこうなった。。

今回のコード

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(9)【inputの入力値を扱う。Referencing a template reference variable】

input値をbuttonに仕込んだイベントから参照、イベントに渡す方法です。
チュートリアルのここです。

#として設定

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">call</button>

ref-prefixとして設定

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

input要素に#phoneとすることでbutton要素がphoneへの参照を可能にしています。
ref-faxもやはりbutton要素からfaxへの参照を可能にしています。

上記のことは同じ要素か、兄弟要素か、子要素に対してできるようです。

試してみたのがこちら

<button ref-oneself (click)="callOneself(oneself.value)" value="it's me!">it's me!</button>
自分自身のvalueを参照しています。

コンポーネント側

export class ChildComponent {
callPhone(value){
alert(value);
}
callFax(value){
alert(value);
}
callOneself(value){
alert(value)
}
}

なるほどですねーー。

今回のコード

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(6)【classの置き換え,override】

classを修正するのはよくするところなのでそこらへん。

チュートリアルのここ見ながら確認

今回やっていること

・普通にclassとして要素に記述する
・それをリセットして反映させる[class]
・メタデータにstylesとして子directiveのstyle制御
・子directiveをtemplateUrlとしてhtmlファイルで管理する

app.childComponent.html

<nav class="navbar-fixed"><span class="">Contacts</span></nav>

app.component.ts
@Component({
selector: 'contacts-header',
templateUrl: `./app/app.childComponent.html`,
styles: ['.navbar-fixed { position:fixed; }']
})
export class HeaderComponent {
colorBlue: string = "colorBlue";
constrctor (){
}
}

なんてことないですが、ちょっとずつ確認してこーと思います

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事