1

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,３, 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.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
oubushixb
  • 31
  • 4

1 Answers1

1

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

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265