angular-docs-cn/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart

53 lines
1.2 KiB
Dart

// #docregion
import 'package:angular2/angular2.dart';
import 'logger_service.dart';
import 'spy_directive.dart';
@Component(
selector: 'spy-parent',
template: '''
<div class="parent">
<h2>Spy Directive</h2>
<input [(ngModel)]="newName" (keyup.enter)="addHero()">
<button (click)="addHero()">Add Hero</button>
<button (click)="reset()">Reset Heroes</button>
<p></p>
<div *ngFor="#hero of heroes" mySpy class="heroes">
{{hero}}
</div>
<h4>-- Spy Lifecycle Hook Log --</h4>
<div *ngFor="#msg of spyLog">{{msg}}</div>
</div>
''',
styles: const [
'.parent {background: khaki; padding: 10px; margin:100px 8px}',
'.heroes {background: LightYellow; padding: 0 8px}'
],
directives: const [Spy],
providers: const [LoggerService])
class SpyParentComponent {
String newName = 'Herbie';
List<String> heroes = ['Windstorm', 'Magneta'];
List<String> spyLog;
LoggerService _logger;
SpyParentComponent(this._logger) {
spyLog = _logger.logs;
}
addHero() {
if (newName.trim().isNotEmpty) {
heroes.add(newName.trim());
newName = '';
}
}
reset() {
_logger.log('-- reset --');
heroes.clear();
}
}