angular2で再帰的に親directiveを辿りたいときってありますよね？そういうときは@Optional, @Host, @SkipSelfを使いましょう。
ネストしている数を表示するFooDirectiveを作りながら説明します。
app.ts
//our root app component
import {Component} from 'angular2/core'
import {FooDirective} from './foo'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<div foo #a="foo">
{{a.nestCount}}
<div foo #b="foo">
{{b.nestCount}}
<div foo #c="foo">{{c.nestCount}}</div>
</div>
</div>
</div>
`,
directives: [FooDirective]
})
export class App {
constructor() {
this.name = 'Angular2'
}
}
とりあえず雛形を作ってみる
こんなかんじですか
foo.ts
import {
Directive,
Optional,
Host,
SkipSelf
} from 'angular2/core'
@Directive({
selector: '[foo]',
exportAs: 'foo'
})
export class FooDirective {
// なんとかして親のFooDirectiveをinjectしたい
constructor(private _parent: FooDirective) {}
get nestCount() {
return this._parent ? this._parent.nestCount + 1 : 0;
}
}
@Host
@Hostアノテーションをつけると、自分自身の要素からShadow DOM root間を辿って指定された型のdirectiveをinjectしてくれます。とりあえずFooDirective型のdirectiveを_parentにinjectしてみます。
export class FooDirective {
constructor(@Host() private _parent: FooDirective) {}
// ...
}
怒られました。自分自身の要素も含まれるので循環参照となります。
EXCEPTION: Cannot instantiate cyclic dependency! (FooDirective -> FooDirective)
@SkipSelf
@SkipSelfアノテーションをつけると、自分自身の要素は除外して辿ってくれます。以下のように書き換えてみます。
export class FooDirective {
constructor(@Host() @SkipSelf() private _parent: FooDirective) {}
// ...
}
また怒られました。辿った結果directiveがないとエラーになります(つまり一番上のFooDirectiveではエラー)。
EXCEPTION: No provider for FooDirective! (FooDirective -> FooDirective)
@Optional
@Optionalアノテーションをつけると、辿った結果directiveが存在しなければnullがinjectされます。コードを以下のように書き換えて完成です。http://plnkr.co/edit/9CwZnm?p=preview こんな感じで動いたでしょうか？
export class FooDirective {
constructor(@Optional() @Host() @SkipSelf() private _parent: FooDirective) {}
// ...
}
思ったこと
初めて見たときは気持ち悪い書き方だと思ったｗ