docs(lifecycle-hooks): post-RC5 Dart resync (#2141)
* lifecycle-hooks: copy latest to cache * docs(lifecycle-hooks): post-RC5 Dart resync - TS prose: removed mention of `routerOnActivate` which no longer exists in the new router. - TS improvements to the sample code have also been propagated to the Dart sample. Contributes to #2077. E2E tests pass now. * post-review updates
This commit is contained in:
parent
5d1da1e047
commit
f0daf5d238
|
@ -7,7 +7,7 @@ import 'logger_service.dart';
|
|||
//////////////////
|
||||
// #docregion child-view
|
||||
@Component(
|
||||
selector: 'my-child',
|
||||
selector: 'my-child-view',
|
||||
template: '<input [(ngModel)]="hero">')
|
||||
class ChildViewComponent {
|
||||
String hero = 'Magneta';
|
||||
|
@ -20,7 +20,7 @@ class ChildViewComponent {
|
|||
// #docregion template
|
||||
template: '''
|
||||
<div>-- child view begins --</div>
|
||||
<my-child></my-child>
|
||||
<my-child-view></my-child-view>
|
||||
<div>-- child view ends --</div>
|
||||
<p *ngIf="comment.isNotEmpty" class="comment">{{comment}}</p>''',
|
||||
// #enddocregion template
|
||||
|
|
|
@ -92,7 +92,7 @@ class DoCheckComponent implements DoCheck, OnChanges {
|
|||
|
||||
@Component(
|
||||
selector: 'do-check-parent',
|
||||
templateUrl: 'on_changes_parent_component.html',
|
||||
templateUrl: 'do_check_parent_component.html',
|
||||
styles: const ['.parent {background: Lavender}'],
|
||||
directives: const [DoCheckComponent])
|
||||
class DoCheckParentComponent {
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
<div class="parent">
|
||||
<h2>{{title}}</h2>
|
||||
|
||||
<table>
|
||||
<tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
|
||||
<tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
|
||||
</table>
|
||||
<p><button (click)="reset()">Reset Log</button></p>
|
||||
|
||||
<!-- #docregion do-check -->
|
||||
<do-check [hero]="hero" [power]="power"></do-check>
|
||||
<!-- #enddocregion do-check -->
|
||||
</div>
|
|
@ -10,5 +10,4 @@
|
|||
<!-- #docregion on-changes -->
|
||||
<on-changes [hero]="hero" [power]="power"></on-changes>
|
||||
<!-- #enddocregion on-changes -->
|
||||
<do-check [hero]="hero" [power]="power"></do-check>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:lifecycle_hooks/app_component.dart';
|
||||
|
||||
main() {
|
||||
void main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
// #docregion
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
|
|
|
@ -3,9 +3,16 @@ extends ../../../ts/_cache/guide/lifecycle-hooks.jade
|
|||
block includes
|
||||
include ../_util-fns
|
||||
|
||||
block optional-interfaces
|
||||
//- n/a for Dart
|
||||
block other-angular-subsystems
|
||||
:marked
|
||||
The router, for instance, also has its own [router lifecycle
|
||||
hooks](router.html#router-lifecycle-hooks) that allow us to tap into
|
||||
specific moments in route navigation.
|
||||
A parallel can be drawn between `ngOnInit` and `routerOnActivate`. Both are
|
||||
prefixed so as to avoid collision, and both run right when a component is
|
||||
being initialized.
|
||||
|
||||
block tick-methods
|
||||
:marked
|
||||
The `LoggerService.tick` method, which returns a `Future`, postpones the update one turn of the of the browser's update cycle ... and that's long enough.
|
||||
The `LoggerService.tick` method, which returns a `Future`, postpones the
|
||||
update one turn of the of the browser's update cycle ... and that's long enough.
|
||||
|
|
|
@ -43,10 +43,12 @@ a#hooks-overview
|
|||
:marked
|
||||
No directive or component will implement all of them and some of the hooks only make sense for components.
|
||||
Angular only calls a directive/component hook method *if it is defined*.
|
||||
block optional-interfaces
|
||||
|
||||
+ifDocsFor('ts|js')
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Interface optional?
|
||||
|
||||
The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
|
||||
The JavaScript language doesn't have interfaces.
|
||||
Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
|
||||
|
@ -86,7 +88,7 @@ table(width="100%")
|
|||
td ngDoCheck
|
||||
td
|
||||
:marked
|
||||
Detect and act upon changes that Angular can or won't
|
||||
Detect and act upon changes that Angular can't or won't
|
||||
detect on its own. Called every change detection run.
|
||||
tr(style=top)
|
||||
td ngOnDestroy
|
||||
|
@ -186,12 +188,11 @@ a(id="other-lifecycles")
|
|||
## Other lifecycle hooks
|
||||
|
||||
Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed.
|
||||
The router, for instance, also has it's own [router lifecycle hooks](router.html#router-lifecycle-hooks)
|
||||
that allow us to tap into specific moments in route navigation.
|
||||
|
||||
A parallel can be drawn between `ngOnInit` and `routerOnActivate`.
|
||||
Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
|
||||
block other-angular-subsystems
|
||||
//- N/A for TS.
|
||||
|
||||
:marked
|
||||
3rd party libraries might implement their hooks as well in order to give us, the developers, more
|
||||
control over how these libraries are used.
|
||||
|
||||
|
|
|
@ -43,10 +43,12 @@ a#hooks-overview
|
|||
:marked
|
||||
No directive or component will implement all of them and some of the hooks only make sense for components.
|
||||
Angular only calls a directive/component hook method *if it is defined*.
|
||||
block optional-interfaces
|
||||
|
||||
+ifDocsFor('ts|js')
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Interface optional?
|
||||
|
||||
The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
|
||||
The JavaScript language doesn't have interfaces.
|
||||
Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
|
||||
|
@ -187,9 +189,10 @@ a(id="other-lifecycles")
|
|||
|
||||
Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed.
|
||||
|
||||
A parallel can be drawn between `ngOnInit` and `routerOnActivate`.
|
||||
Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
|
||||
block other-angular-subsystems
|
||||
//- N/A for TS.
|
||||
|
||||
:marked
|
||||
3rd party libraries might implement their hooks as well in order to give us, the developers, more
|
||||
control over how these libraries are used.
|
||||
|
||||
|
|
Loading…
Reference in New Issue