複数のカスタムディレクティブ間でinputs属性または@Inputを使って値を受け渡す方法をまとめました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
※目次をクリックすると目次の下部にコンテンツが表示されます。
inputs属性、@Input()
●宣言方法
①コンポーネントのクラス内で宣言
@Input() propertyName;
※以下のようにInputをインポートする必要がある。
import {Input} from ‘@angular/core’;
②@Componentデコレーターの属性で指定
@Component({
inputs: [‘propertyName’],
})
●プロパティ名を別名にする場合
①コンポーネントのクラス内で宣言
@Input(‘alias’) propertyName;
②デコレーター内の属性で指定
@Directive({
inputs:[‘propertyName:alias’]
})
●使用方法
“my-sub”というカスタムディレクティブを以下のようなテンプレートで利用する場合を例に示す。
<my-sub [subName]=”‘Sub-A'”></my-sub>
１）他のディレクティブを利用する側
①@Componentデコレーターの”directives”属性に利用するカスタムディレクティブの名前を配列で指定
@Component({
selector: ‘my-app’,
directives: [MySub]
②テンプレートでカスタムディレクティブを記述
<my-sub [subName]=”‘Sub-A'”></my-sub>
“my-sub”ディレクティブの”subName”属性に’Sub-A’という値を入力値として渡す。
２）利用される側のディレクティブ
@Componentデコレーターの”inputs”属性またはコンポーネントのクラス内で@Input()を使って宣言。
@Component({
selector: ‘my-sub’,
inputs: [‘name:subName’]
または
class MySub {
@Input(‘subName’) name: string;
①コンポーネントのクラス内で宣言
@Input() propertyName;
※以下のようにInputをインポートする必要がある。
import {Input} from ‘@angular/core’;
②@Componentデコレーターの属性で指定
@Component({
inputs: [‘propertyName’],
})
●プロパティ名を別名にする場合
①コンポーネントのクラス内で宣言
@Input(‘alias’) propertyName;
②デコレーター内の属性で指定
@Directive({
inputs:[‘propertyName:alias’]
})
●使用方法
“my-sub”というカスタムディレクティブを以下のようなテンプレートで利用する場合を例に示す。
<my-sub [subName]=”‘Sub-A'”></my-sub>
１）他のディレクティブを利用する側
①@Componentデコレーターの”directives”属性に利用するカスタムディレクティブの名前を配列で指定
@Component({
selector: ‘my-app’,
directives: [MySub]
②テンプレートでカスタムディレクティブを記述
<my-sub [subName]=”‘Sub-A'”></my-sub>
“my-sub”ディレクティブの”subName”属性に’Sub-A’という値を入力値として渡す。
２）利用される側のディレクティブ
@Componentデコレーターの”inputs”属性またはコンポーネントのクラス内で@Input()を使って宣言。
@Component({
selector: ‘my-sub’,
inputs: [‘name:subName’]
または
class MySub {
@Input(‘subName’) name: string;
デモ
Angular : 4.4.3（2.0.0でも動作確認済み）
Bootstrap : 3.x
関連記事の目次
Bootstrap : 3.x
<html>
<head>
<title>Angular 2 Demo</title>
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://npmcdn.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="./js/systemjs.config.js"></script>
<script>
System.import('./ts/app.ts').catch(function(err){ console.error(err); }); </script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container">
<my-app>Loading...</my-app>
</div>
</body>
</html>
（systemjs.config.js）
(function (global) {
var ngVer = '@4.4.3';
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"strict": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'app': 'app',
'@angular/animations': 'npm:@angular/animations' + ngVer + '/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + ngVer + '/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core' + ngVer + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + ngVer + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + ngVer + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + ngVer + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + ngVer + '/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + ngVer + '/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + ngVer + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + ngVer + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + ngVer + '/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router' + ngVer + '/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms' + ngVer + '/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade' + ngVer + '/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade' + ngVer + '/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.1',
'tslib': 'npm:tslib/tslib.js',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.3.2/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component,Input } from '@angular/core';
@Component({
selector: 'my-sub',
template: `
<h4>{{name}}</h4>
<ul>
<li *ngFor="let item of logs">
{{item.id}}=>{{item.msg}}
</li>
</ul>
<button (click)="addlog(name + 'のテストログ')">ログ記録</button>
`,
inputs: ['name:subName']
})
class MySub {
public name: string;
public log: {id: number; msg: string;};
public logs: log[] = [
{"id": 0, "msg": '初期値'}
];
public logCount: number = 0;
addlog(msg: string) {
this.logs.push({
id: ++this.logCount,
msg: msg
});
};
}
@Component({
selector: 'my-sub2',
template: `
<h4>{{name}}</h4>
<ul>
<li *ngFor="let item of logs">
{{item.id}}=>{{item.msg}}
</li>
</ul>
<button (click)="addlog(name + 'のテストログ')">ログ記録</button>
`
})
class MySub2 {
@Input('subName') name: string;
public log: {id: number; msg: string;};
public logs: log[] = [
{"id": 0, "msg": '初期値'}
];
public logCount: number = 0;
addlog(msg: string) {
this.logs.push({
id: ++this.logCount,
msg: msg
});
};
}
@Component({
selector: 'my-app',
template: `
<button (click)="open('Sub-A')">Sub-A</button>
<button (click)="open('Sub-B')">Sub-B</button>
<div [ngSwitch]="tab">
<div *ngSwitchCase="'Sub-A'">
<my-sub [subName]="'Sub-A'"></my-sub>
</div>
<div *ngSwitchCase="'Sub-B'">
<my-sub2 [subName]="'Sub-B'"></my-sub2>
</div>
</div>
`,
directives: [MySub,MySub2]
})
export class AppComponent {
public tab = 'Sub-A';
open(tab: string) {
this.tab = tab;
}
}
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent,
MySub,
MySub2
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);