Tải lại trang hiện tại ở Aurelia

Question

Tôi có ứng dụng Aurelia nơi người dùng có thể chọn công ty mà họ hiện đang "làm việc". Mỗi trang trong ứng dụng phụ thuộc vào công ty hiện được chọn và người dùng có thể chọn một công ty mới từ trình đơn thả xuống. Trình đơn thả xuống là một thành phần nằm trên thanh điều hướng.

Điều tôi muốn là để thành phần đó tải lại trang hiện tại trên trình xử lý change.delegate mà không cần khởi động lại ứng dụng. Vì vậy, thiết lập window.location.href không nằm trong câu hỏi.

Có cách nào để buộc aurelia Router tải lại tuyến đường/trang hiện tại không?

Cách khác là sử dụng EventAggregator để báo hiệu thay đổi của công ty trong ứng dụng, nhưng điều đó sẽ yêu cầu đăng ký sự kiện đó trên mọi trang hoặc mỗi trang được kế thừa từ lớp cơ sở đăng ký sự kiện đó đây là những lựa chọn có liên quan nhiều hơn.

Answer 1

Điều này không trả lời câu hỏi chính xác của bạn là cách buộc tải lại chế độ xem hiện tại, nhưng bạn đã cân nhắc thêm số nhận dạng công ty hiện tại vào (các) tuyến đường của mình chưa? Điều này sẽ giải quyết vấn đề của bạn và làm cho các tuyến đường của bạn có thể đánh dấu được: ví dụ: /#/company1/view1 và /#/company2/view1. Khi bạn thay đổi công ty trong menu thả xuống, bạn gọi router.navigate() bằng tuyến đường mới và chế độ xem mới sẽ được tải/làm mới.

Để trả lời câu hỏi chính xác của bạn, tôi đã thử nghiệm các tùy chọn router.navigate: router.navigate('myroute', {replace:true, trigger:true}) và không ai trong số chúng buộc tải lại chế độ xem nếu chế độ xem phù hợp đã được tải. Bằng cách thêm ?ramdomNumber vào tên tuyến đường của bạn, bạn có thể buộc kích hoạt lại chế độ xem.

Answer 2

Đây là một giải pháp đơn giản để làm mới trang: trong aurelia-lịch sử-browser.js, thêm một tấm séc trong updateHash() và nếu _href mới bằng cũ sau đó tải lại trang từ bộ nhớ cache (không máy chủ).

Sau đó, để làm mới trang bạn chỉ cần sử dụng các tùy chọn hiện có:

router.navigateToRoute('watch', {}, { replace: true, trigger: true }); 

Mã cập nhật được sao chép dưới đây:

function updateHash(location, fragment, replace) { 
    if (replace) { 
     var _href = location.href.replace(/(javascript:|#).*$/, '') + '#' + fragment; 
     if (_href == location.href) 
     location.reload(false); 
     else 
     location.replace(_href); 
    } else { 
     location.hash = '#' + fragment; 
    } 
    } 

Answer 3

Mặc dù không hỗ trợ chính thức, có rất nhiều hacks gợi ý in a relevant GitHub issue yêu cầu cho chức năng này rất.

Người tôi đã làm việc đó không liên quan đến việc cập nhật mã nguồn aurelia của cũng không thêm dữ liệu cần thiết để các tuyến đường là để thiết lập activationStrategy trên tất cả các tuyến đường của tôi là invokeLifecycle thay vì mặc định, như vậy:

export class App { 

    configureRouter(config, router) { 
    config.map([ 
     { 
     route: ['', 'home'], 
     name: 'home', 
     moduleId: 'home/index', 
     activationStrategy: activationStrategy.invokeLifecycle 
     }, 
     { 
     route: 'users', 
     name: 'users', 
     moduleId: 'users/index', 
     nav: true, 
     activationStrategy: activationStrategy.invokeLifecycle 
     }, 
     ... etc ... 
    ]); 
    } 

} 

Điều này khiến cho phương thức activate() của tuyến đường sẽ chạy như bạn mong đợi khi mô hình xem được tải lại. Sau đó, trong mã bắt đầu tải lại, tôi làm như sau:

this.router.navigateToRoute(
    this.router.currentInstruction.config.name, 
    this.router.currentInstruction.params, 
    { replace: true } 
);