【发布时间】:2017-10-06 20:57:04
【问题描述】:
情况如下:我正在使用异步。使用 systemJS 加载脚本(通过脚本,我的意思是 jQuery、Angular2、...)。现在我想在其中实现 Turbolinks。一切正常,但我的角度组件仅在第一次呈现。如果我使用 Turbolinks 查看下一页,我的组件不会呈现。对象检查器和源代码中没有错误只是这样:
<search-app></search-app>
我已经厌倦了在对象检查器中的测试,但是在第二页引导之后,这只是 HTML 标记。
这是我在页面上的 Head 标记中的 SystemJS 中加载脚本:
System.config({
meta: {
'/bundles/frontall': { format: 'global' },
'/bundles/raphael': { format: 'global' },
'/bundles/zopim': { format: 'global' },
'/bundles/angular2': { format: 'global' }
},
packages: {
'angular': {
format: 'register',
defaultExtension: 'js'
},
'angular2': {
format: 'global',
defaultExtension: 'js'
},
'rxjs': {
format: 'global',
defaultExtension: 'js'
}
},
paths: {
'angular2/*': 'scripts/angular2/*',
'rxjs/*': 'scripts/rxjs/*'
}
});
System.import('/bundles/frontall').then(function () {
Promise.all([
System.import('/bundles/zopim'),
System.import('/bundles/raphael'),
System.import('bundles/angular2'),
@RenderSection("asyncScripts", required: false)
]).then(function () {
System.import('angular/searchApp');
});
frontAll 包中是 site.js 文件,我在其中重新初始化所有组件:
function componentInit() {
//init material design
$.material.init();
//init texarea autosize
autosize($('textarea'));
//init parallax
$('.parallax-window').parallax();
//init smooth scroll
//SmoothScroll();
//init css3 animate it
$.animateIt();
$.doTimeout();
$.animateItInit();
$.srSmoothscroll({
step: 80,
speed: 90,
ease: 'linear',
target: $('body'),
container: $(window)
});
}
$(function () {
componentInit();
});
$(document).on('page:load', function () {
componentInit();
});
Angular 2 版本是 beta 7。有人知道问题出在哪里吗?非常感谢!
【问题讨论】:
-
好的,解决了!我需要将
jQuery(function () { bootstrap(searchApp, [ElementRef, TournamentSearchService]); }); jQuery(document).on('page:load', function () { bootstrap(searchApp, [ElementRef, TournamentSearchService]); });添加到我的 angular2 应用程序中,它可以工作。 :-)) -
太好了,请创建一个答案并接受您自己的答案,这样这个问题就可以结束了。
标签: javascript typescript angular systemjs