AngularDart4.0 高级-层级依赖注入器 顶

@Component(
  selector: 'villains-list',
  template: '''
      <div>
        <h3>Villains</h3>
        <ul>
          <li *ngFor="let villain of villains | async">{{villain.name}}</li>
        </ul>
      </div>
    ''',
  directives: const [CORE_DIRECTIVES],
  providers: const [VillainsService],
  pipes: const [COMMON_PIPES],
)

import 'dart:async';
import 'package:angular/angular.dart';
import 'hero.dart';
import 'heroes_service.dart';
@Injectable()
class HeroTaxReturnService {
  final HeroesService _heroService;
  HeroTaxReturn _currentTR, _originalTR;
  HeroTaxReturnService(this._heroService);
  void set taxReturn(HeroTaxReturn htr) {
    _originalTR = htr;
    _currentTR = new HeroTaxReturn.copy(htr);
  }
  HeroTaxReturn get taxReturn => _currentTR;
  void restoreTaxReturn() {
    taxReturn = _originalTR;
  }
  Future<Null> saveTaxReturn() async {
    taxReturn = _currentTR;
    await _heroService.saveTaxReturn(_currentTR);
  }
}

import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'hero.dart';
import 'hero_tax_return_service.dart';
@Component(
    selector: 'hero-tax-return',
    template: '''
      <div class="tax-return">
        <div class="msg" [class.canceled]="message==='Canceled'">{{message}}</div>
        <fieldset>
          <span id="name">{{taxReturn.name}}</span>
          <label id="tid">TID: {{taxReturn.taxId}}</label>
        </fieldset>
        <fieldset>
          <label>
            Income: <input type="number" [(ngModel)]="taxReturn.income" class="num">
          </label>
        </fieldset>
        <fieldset>
          <label>Tax: {{taxReturn.tax}}</label>
        </fieldset>
        <fieldset>
          <button (click)="onSaved()">Save</button>
          <button (click)="onCanceled()">Cancel</button>
          <button (click)="onClose()">Close</button>
        </fieldset>
      </div>
    ''',
    styleUrls: const ['hero_tax_return_component.css'],
    directives: const [CORE_DIRECTIVES, formDirectives],
    providers: const [HeroTaxReturnService])
class HeroTaxReturnComponent {
  final HeroTaxReturnService _heroTaxReturnService;
  String message = '';
  HeroTaxReturnComponent(this._heroTaxReturnService);
  final _close = new StreamController<Null>();
  @Output()
  Stream<Null> get close => _close.stream;
  HeroTaxReturn get taxReturn => _heroTaxReturnService.taxReturn;
  @Input()
  void set taxReturn(HeroTaxReturn htr) {
    _heroTaxReturnService.taxReturn = htr;
  }
  Future<Null> onCanceled() async {
    _heroTaxReturnService.restoreTaxReturn();
    await flashMessage('Canceled');
  }
  void onClose() => _close.add(null);
  Future<Null> onSaved() async {
    await _heroTaxReturnService.saveTaxReturn();
    await flashMessage('Saved');
  }
  Future<Null> flashMessage(String msg) async {
    message = msg;
    await new Future.delayed(const Duration(milliseconds: 500));
    message = '';
  }
}

providers: const [HeroTaxReturnService])

import 'package:angular/angular.dart';
import 'car_services.dart';
@Component(
    selector: 'c-car',
    template: '<div>C: {{description}}</div>',
    providers: const [const Provider(CarService, useClass: CarService3)])
class CCarComponent {
  String description;
  CCarComponent(CarService carService) {
    this.description =
        '${carService.getCar().description} (${carService.name})';
  }
}
@Component(
    selector: 'b-car',
    template: '''
      <div>B: {{description}}</div>
      <c-car></c-car>
    ''',
    directives: const [
      CCarComponent
    ],
    providers: const [
      const Provider(CarService, useClass: CarService2),
      const Provider(EngineService, useClass: EngineService2)
    ])
class BCarComponent {
  String description;
  BCarComponent(CarService carService) {
    this.description =
        '${carService.getCar().description} (${carService.name})';
  }
}
@Component(
    selector: 'a-car',
    template: '''
      <div>A: {{description}}</div>
      <b-car></b-car>
    ''',
    directives: const [BCarComponent])
class ACarComponent {
  String description;
  ACarComponent(CarService carService) {
    this.description =
        '${carService.getCar().description} (${carService.name})';
  }
}
@Component(
    selector: 'my-cars',
    template: '''
      <h3>Cars</h3>
      <a-car></a-car>
    ''',
    directives: const [ACarComponent])
class CarsComponent {}
const carComponents = const [
  CarsComponent,
  ACarComponent,
  BCarComponent,
  CCarComponent
];
// generic car-related services
const carServices = const [CarService, EngineService, TiresService];

import 'package:angular/angular.dart';
/// Model
class Car {
  String name = 'Avocado Motors';
  Engine engine;
  Tires tires;
  Car(this.engine, this.tires);
  String get description => '$name car with '
      '${engine.cylinders} cylinders and '
      '${tires.make} tires.';
}
class Engine {
  int cylinders = 4;
}
class Tires {
  String make = 'Flintstone';
  String model = 'Square';
}
//// Engine services ///
@Injectable()
class EngineService {
  String id;
  EngineService() : id = 'E1';
  Engine getEngine() => new Engine();
}
@Injectable()
class EngineService2 extends EngineService {
  EngineService2() {
    id = 'E2';
  }
  @override
  Engine getEngine() => new Engine()..cylinders = 8;
}
//// Tire services ///
@Injectable()
class TiresService {
  final id = 'T1';
  Tires getTires() => new Tires();
}
/// Car Services ///
@Injectable()
class CarService {
  EngineService engineService;
  TiresService tiresService;
  String id;
  CarService(this.engineService, this.tiresService) : id = 'C1';
  Car getCar() => new Car(engineService.getEngine(), tiresService.getTires());
  String get name => '$id-${engineService.id}-${tiresService.id}';
}
@Injectable()
class CarService2 extends CarService {
  CarService2(EngineService engineService, TiresService tiresService)
      : super(engineService, tiresService) {
    id = 'C2';
  }
  @override
  Car getCar() => super.getCar()..name = 'BamBam Motors, BroVan 2000';
}
@Injectable()
class CarService3 extends CarService2 {
  CarService3(EngineService engineService, TiresService tiresService)
      : super(engineService, tiresService) {
    id = 'C3';
  }
  @override
  Car getCar() =>
      super.getCar()..name = 'Chizzamm Motors, Calico UltraMax Supreme';
}