Angular の子コントローラーから親スコープにアクセスする
Angular の子コントローラーから親スコープにアクセスする方法を紹介します。
Angular の子コントローラーから親スコープにアクセスする
コンポーネントベースのライブラリまたはフレームワークで作業する場合、2つのコンポーネント間でデータを共有する必要があるシナリオがたくさんあります。
まず、users コンポーネントを作成します。
# angular CLI
ng g c users
上記のコマンドは、新しい users コンポーネントを生成します。
app フォルダー内に新しい users フォルダーがあることがわかります。users コンポーネントを表示するには、user.component.ts で設定された users selector を使用する必要があります。
それでは、app コンポーネント内に users コンポーネントを表示しましょう。まず、app.module.ts の declarations に UsersComponent を追加する必要があります。
したがって、app.module.ts は次のようになります。
# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { UsersComponent } from './users/users.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, UsersComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.html にユーザーセレクターを使用してタグを作成する必要があります。これにより、users.component.html に追加したものがすべて表示されます。app.component.html のコードは次のようになります。
# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users></app-users>
出力：
写真のように、app-users タグには users works!が表示されています。なぜなら、users.component.html には次のコードがあるからです。
# angular
<p>users works!</p>
それを見出しに変換して、親コンポーネントからデータを送信しましょう。
まず、<p> タグを <h3> に変更します。
# angular
<h3>Child Component</h3>
出力：
親コンポーネントから子コンポーネントに単純なデータを送信します。app.component.ts ファイル内で変数を定義するので、コードは以下のようになります。
# angular
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
data = "User Name"
}
コードにあるように、data に User Name を代入しました。この data を子コンポーネントに送信してみましょう。これで、app.component.html は以下のようになります。
# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users [data] = "data"></app-users>
[data] を変数 data にバインドすることで、子コンポーネントにデータを送信しますが、まだ完全にはバインドされていません。
users.component.ts ファイルに input をインポートする必要があります。input は、子コンポーネントに送信したデータを読み取り、子コンポーネントに表示するデコレータです。
UsersComponent クラス内で、app-users タグ内の app.component.html でバインドしたプロパティを読み取ります。したがって、users.component.ts のコードは次のようになります。
# angular
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
@Input() data
constructor() { }
ngOnInit() {
}
}
コードに示されているように、@Input() data を使用して、app.component.html の app-users タグから [data] をバインドしました。受け取ったデータを users.component.html ファイル内に表示します。
# angular
<h3>Child Component</h3>
<h4>Data Recieved:</h4>
<p>{{data}}</p>
出力：
親コンポーネントから子コンポーネントにデータを受け取りました。次に、オブジェクトを親から子に共有する方法について説明します。
送信するデータを変更して、オブジェクトを共有してみましょう。
# angular
data = {
name: 'Rana Hasnain',
age: 25
}
出力：
そのオブジェクトからのデータの代わりに [オブジェクトオブジェクト] を表示していることがわかります。ここで行う必要があるのは、users.component.html ファイルのコードを変更し、{{data}} を {{data.name}} または {{data.age}} に変更することです。オブジェクトが表示されます。
# angular
<h3>Child Component</h3>
<h4>Data Received:</h4>
<p>Name: {{ data.name }}</p>
<p>Age: {{ data.age }}</p>
出力：
これで、親コンポーネントから子コンポーネントにデータとオブジェクトを共有したことがわかります。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn関連記事 - Angular Controller
- AngularJS における Controller as Syntax の使用方法
- AngularJS の 1 ページに複数のコントローラーを作成する
- AngularJS のコントローラー間でデータを共有する