SPEED & PERFORMANCE
Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre-rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling and snappy view transitions.
The features look great, but a normal requirement is that when I navigate from ListComponent
to ViewComponent
, I want keep the ListComponent
cached so when I click back from ViewComponent
, the ListComponent
doesn't need to rerender( ListComponent
often gets AJAX data from page 2,3, etc. I know I can keep the data in a service and store the scrollPosition
when I click back, but it will rerender the data again. I really think caching it is a better way.
I implement CanReuse
, but it dosn't work, it only works when navigating between ViewComponents
. So., I want know how the ListComponent
to ViewComponent
caching can work.
Use the ProtoViewRef class:
A ProtoView is a prototypical View that is the result of Template compilation and is used by Angular to efficiently create an instance of this View based on the compiled Template.
Most ProtoViews are created and used internally by Angular and you don't need to know about them, except in advanced use-cases where you compile components yourself via the low-level Compiler API.
Example
Given this template:
Count: {{items.length}}
<ul>
<li *ngFor="var item of items">{{item}}</li>
</ul>
Angular desugars and compiles the template into two ProtoViews:
Outer ProtoView:
Count: {{items.length}} <ul> <template ngFor var-item [ngForOf]="items"></template> </ul>
Inner ProtoView:
<li>{{item}}</li>
Notice that the original template is broken down into two separate ProtoViews.
References
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.