javascript - Angular2 và Turbolinks

Tình huống như sau: Tôi đang sử dụng tải script bất đồng bộ với systemJS (bằng script, tôi ý là jQuery, Angular2, ...). Bây giờ tôi muốn triển khai Turbolinks vào việc này. Mọi thứ hoạt động bình thường, nhưng component Angular của tôi chỉ được render lần đầu tiên. Nếu tôi sử dụng Turbolinks để xem trang tiếp theo, component của tôi không được render. Không có lỗi trong trình kiểm tra đối tượng và trong mã nguồn chỉ có điều này:

<search-app></search-app>

Tôi đã thử kiểm tra trong trình kiểm tra đối tượng nhưng sau trang thứ hai, điều này chỉ là thẻ HTML.

Đây là các script tải của tôi trong SystemJS trong thẻ Head trên trang của tôi:

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');
        });

Trong gói frontAll có file site.js, nơi tôi khởi tạo lại tất cả các thành phần:

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();
});

Phiên bản Angular 2 là beta 7. Ai biết vấn đề ở đâu không? Cảm ơn rất nhiều!

Câu trả lời #1

Tôi cần thêm điều này vào ứng dụng angular2 của mình và nó hoạt động:

jQuery(function () { 
    bootstrap(searchApp, [ElementRef, TournamentSearchService]); 
}); 
jQuery(document).on('page:load', function () { 
    bootstrap(searchApp, [ElementRef, TournamentSearchService]); 
});