docs(lifecycle-hooks): fix wrong style markup (#3475)
This commit is contained in:
parent
f7c89d07b1
commit
d819504638
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue