2016年12月19日

Angular2のコンポーネント

Angular2でコンポーネントapp.modules.tsにコンポーネントを登録しておけば利用できるようになる。

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<my-h1 myText="h1"></my-h1>
<my-h2 myText="h2"></my-h2>
`
})
export class AppComponent {

}


h1.component.ts

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

@Component({
selector: 'my-h1',
template: `
<h1>{{myText}}</h1>
`
})
export class h1Component {
@Input() myText:String;
}


h2.component.ts

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

@Component({
selector: 'my-h2',
template: `
<h2>{{myText}}</h2>
`
})
export class h2Component {
@Input() myText:String;
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { h1Component } from './h1.component';
import { h2Component } from './h2.component';

@NgModule({
imports: [
BrowserModule,
FormsModule,
],
declarations: [
AppComponent,
h1Component,
h2Component
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

タグ:Angular2
posted by ねこまんま at 23:28 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/445065489
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック