[英]does angular2-beta.0 really cache the view?
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.
Angular 2的速度比Angular 1快得多,它通过服务器端预渲染支持快速的初始加载,通过脱机编译实现快速启动,并提供超快速的更改检测和视图缓存功能,以实现流畅的虚拟滚动和快速的视图过渡。
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. 这些功能看起来不错,但是通常的要求是,当我从
ListComponent
导航到ViewComponent
,我希望保持ListComponent
缓存状态,因此当我从ViewComponent
单击时, ListComponent
不需要重新渲染( ListComponent
通常从第2页获取AJAX数据) ,3等。我知道我可以将数据保存在服务中并在单击时存储scrollPosition
,但是它将再次重新scrollPosition
数据,我真的认为缓存是一种更好的方法。
I implement CanReuse
, but it dosn't work, it only works when navigating between ViewComponents
. 我实现了
CanReuse
,但是它不起作用,仅当在ViewComponents
之间导航ViewComponents
。 So., I want know how the ListComponent
to ViewComponent
caching can work. 所以,我想知道
ListComponent
到ViewComponent
缓存如何工作。
Use the ProtoViewRef class: 使用ProtoViewRef类:
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.
ProtoView是原型视图,它是Template编译的结果,Angular使用该视图基于已编译的Template有效地创建此View的实例。
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.
大多数ProtoViews是由Angular内部创建和使用的,除了在高级用例中,您可以通过低级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:
角除胶并将模板编译成两个ProtoView:
Outer ProtoView: 外部ProtoView:
Count: {{items.length}} <ul> <template ngFor var-item [ngForOf]="items"></template> </ul>
Inner ProtoView: 内部ProtoView:
<li>{{item}}</li>
Notice that the original template is broken down into two separate ProtoViews.
请注意,原始模板分为两个单独的ProtoView。
References 参考
Angular2 Issue #1492: Allow transplanting of <template> ProtoViews into other ViewContainers Angular2问题#1492:允许将<template> ProtoViews移植到其他ViewContainer中
Angular2 Issue #2529: Implement new content reprojection Angular2问题#2529:实施新的内容重新投影
Angular2 Issue #1351: Refactor DynamicComponentLoader/Compiler/Renderer to support user views and make them more consistent Angular2问题#1351:重构DynamicComponentLoader / Compiler / Renderer以支持用户视图并使它们更加一致
Angular2 feat(core): add syntax sugar to make @View optional Angular2 feat(core):添加语法糖以使@View可选
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.