本文整理匯總了TypeScript中angular2/core.Component函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript Component函數的具體用法？TypeScript Component怎麽用？TypeScript Component使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了Component函數的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: Error
export const Component = (metadata: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
providers?: any[],
exportAs?: string,
moduleId?: string,
viewProviders?: any[],
queries?: {[key: string]: any},
changeDetection?: ChangeDetectionStrategy,
templateUrl?: string,
template?: string,
styleUrls?: string[],
styles?: string[],
directives?: Array<Type | any[]>,
pipes?: Array<Type | any[]>,
encapsulation?: ViewEncapsulation
} = {}) => {
if (typeof __moduleName === 'undefined' && typeof module === 'undefined') {
throw new Error('Only SystemJS and CommonJS are supported.');
}
metadata.moduleId = typeof __moduleName === 'undefined' ? module.id : __moduleName;
return OriginalDecorator(metadata);
};示例2: AppComponent
var AppComponent = (function () {
function AppComponent() {
}
AppComponent = __decorate([
core_1.Component({
selector: "main-app",
template: "<h1>Hello World!</h1>"
})
], AppComponent);
return AppComponent;
}());示例3: Component
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
}
])(
Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
HeroService
]
})
.Class({
constructor: function() {
this.title = 'Tour of Heroes';
}
})
);
示例4: Component
import {Component} from 'angular2/core';
Component({
selector: 'subject',
template: 'This is subject'
})
export class MainComponent{
}
示例5: Component
import { Component } from 'angular2/core';
import { Router } from 'angular2/router';
import { HeroService } from './hero.service';
export const DashboardComponent = (
Component({
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html',
styleUrls: ['app/dashboard.component.css']
})
.Class({
constructor: [Router, HeroService, function(router, heroService) {
this._router = router;
this._heroService = heroService;
this.heroes = [];
}],
ngOnInit() {
this._heroService.getHeroes()
.then(heroes => this.heroes = heroes.slice(1,5));
},
gotoDetail(hero) {
let link = ['HeroDetail', { id: hero.id }];
this._router.navigate(link);
}
})
);
/*示例6: Component
import { Component } from 'angular2/core';
import { RouteParams } from 'angular2/router';
import { HeroService } from './hero.service';
export const HeroDetailComponent = (
Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail.component.html',
styleUrls: ['app/hero-detail.component.css'],
inputs: ['hero']
})
.Class({
constructor: [HeroService, RouteParams, function(heroService, routeParams) {
this._heroService = heroService;
this._routeParams = routeParams;
}],
ngOnInit() {
let id = +this._routeParams.get('id');
this._heroService.getHero(id)
.then(hero => this.hero = hero);
},
goBack() {
window.history.back();
}
})
);