docs(lifecycle-hooks): fix wrong style markup (#3475)

This commit is contained in:
Jesús Rodríguez 2017-03-31 02:55:54 +02:00 committed by GitHub
parent f7c89d07b1
commit d819504638
2 changed files with 16 additions and 40 deletions

View File

@ -15,29 +15,6 @@ figure
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
<br class="l-clear-both">
<<<<<<< 93d3db1fd4f61c9c6078b2000dea164c87fa071c
+ifDocsFor('ts|js')
:marked
## Contents
* [Component lifecycle hooks overview](#hooks-overview)
* [Lifecycle sequence](#hooks-purpose-timing)
* [Interfaces are optional (technically)](#interface-optional)
* [Other Angular lifecycle hooks](#other-lifecycle-hooks)
* [Lifecycle examples](#the-sample)
* [Peek-a-boo: all hooks](#peek-a-boo)
* [Spying OnInit and OnDestroy](#spy)
* [OnInit](#oninit)
* [OnDestroy](#ondestroy)
* [OnChanges](#onchanges)
* [DoCheck](#docheck)
* [AfterView](#afterview)
* [Abide by the unidirectional data flow rule](#wait-a-tick)
* [AfterContent](#aftercontent)
* [Content projection](#content-projection)
* [AfterContent hooks](#aftercontent-hooks)
* [No unidirectional flow worries with _AfterContent_](#no-unidirectional-flow-worries)
=======
:marked
## Contents
@ -58,7 +35,6 @@ figure
* [Content projection](#content-projection)
* [AfterContent hooks](#aftercontent-hooks)
* [No unidirectional flow worries with _AfterContent_](#no-unidirectional-flow-worries)
>>>>>>> chore: remove dart remains
:marked
Try the <live-example></live-example>.
@ -93,7 +69,7 @@ table(width="100%")
th Hook
th Purpose and Timing
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngOnChanges()</code>
td
:marked
@ -102,7 +78,7 @@ table(width="100%")
Called before `ngOnInit()` and whenever one or more data-bound input properties change.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngOnInit()</code>
td
:marked
@ -111,7 +87,7 @@ table(width="100%")
Called _once_, after the _first_ `ngOnChanges()`.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngDoCheck()</code>
td
:marked
@ -119,7 +95,7 @@ table(width="100%")
Called during every change detection run, immediately after `ngOnChanges()` and `ngOnInit()`.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngAfterContentInit()</code>
td
:marked
@ -129,7 +105,7 @@ table(width="100%")
_A component-only hook_.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngAfterContentChecked()</code>
td
:marked
@ -139,7 +115,7 @@ table(width="100%")
_A component-only hook_.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngAfterViewInit()</code>
td
:marked
@ -149,7 +125,7 @@ table(width="100%")
_A component-only hook_.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngAfterViewChecked()</code>
td
:marked
@ -159,7 +135,7 @@ table(width="100%")
_A component-only hook_.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <code>ngOnDestroy</code>
td
:marked
@ -216,13 +192,13 @@ table(width="100%")
tr
th Component
th Description
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <a href="#peek-a-boo">Peek-a-boo</a>
td
:marked
Demonstrates every lifecycle hook.
Each hook method writes to the on-screen log.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <a href="#spy">Spy</a>
td
:marked
@ -232,33 +208,33 @@ table(width="100%")
This example applies the `SpyDirective` to a `<div>` in an `ngFor` *hero* repeater
managed by the parent `SpyComponent`.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <a href="#onchanges">OnChanges</a>
td
:marked
See how Angular calls the `ngOnChanges()` hook with a `changes` object
every time one of the component input properties changes.
Shows how to interpret the `changes` object.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <a href="#docheck">DoCheck</a>
td
:marked
Implements an `ngDoCheck()` method with custom change detection.
See how often Angular calls this hook and watch it post changes to a log.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <a href="#afterview">AfterView</a>
td
:marked
Shows what Angular means by a *view*.
Demonstrates the `ngAfterViewInit` and `ngAfterViewChecked` hooks.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td <a href="#aftercontent">AfterContent</a>
td
:marked
Shows how to project external content into a component and
how to distinguish projected content from a component's view children.
Demonstrates the `ngAfterContentInit` and `ngAfterContentChecked` hooks.
tr(style=vertical-align:top)
tr(style='vertical-align:top')
td Counter
td
:marked

View File

@ -531,7 +531,7 @@ code-example(format="nocode").
Migrate the template to its own file
called <code>hero-detail.component.html</code>:
+makeExample('toh-5/ts/src/app/hero-detail.component.html', 'src/app/hero-detail.component.html')
+makeExample('toh-5/ts/src/app/hero-detail.component.html', null, 'src/app/hero-detail.component.html')
:marked
Update the component metadata with a `templateUrl` pointing to the template file that you just created.