49 lines
883 B
TypeScript
49 lines
883 B
TypeScript
|
import {
|
||
|
|
Attribute,
|
||
|
|
Component,
|
||
|
|
ElementRef,
|
||
|
|
Inject,
|
||
|
|
Optional,
|
||
|
|
Query,
|
||
|
|
QueryList
|
||
|
|
} from 'angular2/core';
|
||
|
|
|
||
|
|
// #docregion
|
||
|
|
@Component({
|
||
|
|
selector: 'hero-title',
|
||
|
|
template: `
|
||
|
|
<h1>{{titlePrefix}} {{title}}</h1>
|
||
|
|
<button (click)="ok()">OK</button>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
export class TitleComponent {
|
||
|
|
constructor(
|
||
|
|
@Inject('titlePrefix')
|
||
|
|
@Optional()
|
||
|
|
private titlePrefix:string,
|
||
|
|
@Attribute('title')
|
||
|
|
private title:string,
|
||
|
|
@Query('okMsg')
|
||
|
|
private msg:QueryList<ElementRef>) {
|
||
|
|
}
|
||
|
|
|
||
|
|
ok() {
|
||
|
|
let msgEl =
|
||
|
|
this.msg.first.nativeElement;
|
||
|
|
msgEl.textContent = 'OK!';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// #enddocregion
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'hero-di-inject-additional',
|
||
|
|
template: `<hero-title title="Tour of Heroes">
|
||
|
|
<span #okMsg class="ok-msg"></span>
|
||
|
|
</hero-title>`,
|
||
|
|
directives: [TitleComponent]
|
||
|
|
})
|
||
|
|
export class AppComponent {
|
||
|
|
|
||
|
|
}
|