Components and Services

ng-metadata lets us write code in an Angular style. Components writtenin this style are prime candidates for an eventual upgrade using ng-upgrade.

Components

Components use @Component from ng-metadata. Lifecycle hooks similar to thosein Angular should work with ng-metadata.

import { Component, Inject, Input, Output, EventEmitter, OnInit } from 'ng-metadata/core';
import { HeroService } from './hero.service';
@Component({
  selector: 'hero',
  templateUrl: './hero.component.html'
})
export class HeroComponent implements OnInit {
  @Input() name: string;
  @Output() call = new EventEmitter<void>();
  // Services can be included using `@Inject` or by their class literal
  constructor(
    @Inject('$log') private $log: ng.ILogService,
    private heroSvc: HeroService
  ){
  }
  ngOnInit() {
    console.log('Component initialized');
  }
}

Services

Services use @Injectable from ng-metadata. This decorator is written precedinga TypeScript class. Angular 1 services can be added by using the @Injectdecorator in the service constructor.

import { Injectable, Inject } from 'ng-metadata/core';
@Injectable()
export class HeroService {
  constructor(@Inject('$http') private $http: ng.IHttpService){
  }
  fetchAll(){
    return this.$http.get('/api/heroes');
  }
}

原文: https://angular-2-training-book.rangle.io/handout/migrate/ng-metadata/components-and-services.html