如何预加载angular2视图,这样第一次加载时不会闪烁白页?
我正在用简单的JS构建一个有角度的2应用程序.
我的问题是,当我从一个页面更改为另一个页面时,它会闪烁一个白页,直到呈现新视图.仅在我第一次访问它们时才会发生这种情况.如果我第二次进入相同路线,则页面加载时没有白页. 我抓住屏幕来解释我的问题: https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view?usp=sharing 这是我的主要观点: <router-outlet></router-outlet> <nav id="menu"> <a [routerLink]="['Page1']">Page 1</a> <a [routerLink]="['Page2']">Page 2</a> <a [routerLink]="['Page3']">Page 3</a> <a [routerLink]="['Page4']">Page 4</a> <a [routerLink]="['Page5']">Page 5</a> </nav> RouteConfig的定义如下: AppComponent = ng.router .RouteConfig([ {path: '/page1',name:"Page1",component: Page1Component,useAsDefault: true },{path: '/page2',name:"Page2",component: Page2Component},... ]) (AppComponent); 我的所有组件都有.html文件和.css文件,如下所示: Page1Component = ng.core .Component({ selector: 'rl-page1',templateUrl: 'app/components/page1/view.html',styleUrls: ['app/components/page1/style.css'],directives: [ng.router.ROUTER_DIRECTIVES] }) .Class({ constructor: [ng.router.Router,function(router) { this.router = router; }] }); 从我访问它们后看起来像角度缓存页面,在第二次访问时将立即显示(没有白色闪烁).我搜索我如何能够解除这个问题,但我找不到任何答案或方法. 如果您需要更多代码,请与我们联系. (我不在实际应用中使用Page1,Page2,仅针对此问题,我更改为更清晰例如) 谢谢. 编辑:2016-03-18 我尝试使用DynamicComponentLoader加载隐藏div中的所有组件.代码在AppComponent中如下所示: ngOnInit: function(){ this.dcl.loadIntoLocation(Page1Component,this.elementRef,'preloadpages'); this.dcl.loadIntoLocation(Page2Component,'preloadpages'); }, 并且加载的html是:< div style =“display:none;”>< div #preloadpages>< / div>< / div> 但我面临两个问题: >如果我的一个组件在构造函数RouteParams中有这样的: 构造函数:[ng.router.RouteParams,function(routeParam){ 谢谢. 解决方法
在< router-outlet>周围添加一个包装器
<div [hidden]="!isInitialized"> <router-outlet></router-outlet> </div> 在页面组件集中,isInitialized为false.然后打电话 this.router.navigate(['Page1']) .then(_ => this.router.navigate(['page2'])) .then(_ => this.router.navigate(['page3'])) ... .then(_ => { this.isInitialized = true; this.router.navigate(['Page1']); }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |