<require> bên trong một thành phần globalResource được gọi là tăng cường trong Aurelia

Question

Vì vậy, tôi đang cố gắng thiết lập Aurelia trong ứng dụng web Angular 1 của tôi để tôi có thể từ từ nâng cấp. Tôi cần phải làm điều đó vì ứng dụng quá lớn và di chuyển mọi thứ cùng một lúc sẽ là không thể.

Vì vậy, trong thư mục Aurelia của tôi, tôi đã tạo ra một thư mục thành phần với hai thành phần (aurelia-component.js và another-component.js với quan điểm của họ aurelia-component.html và another-component.html), tôi sẽ không đặt javascript như họ chỉ là hai lớp với một thuộc tính, html cho cả hai là như nhau, điều duy nhất mà thay đổi là giá trị tài sản văn bản để tôi có thể phân biệt chúng:

<template> 
    <div>${text}</div> 
</template> 

điểm vào My main.js trông như thế này:

export function configure(aurelia) { 
    aurelia.use 
     .basicConfiguration() 
     .developmentLogging() 
     .globalResources('components/aurelia-component') 
     .globalResources('components/another-component'); 

     //window.aurelia = aurelia; 
    aurelia.start() 
     .then(a => { 
      window.aurelia = a; 
     }); 
} 

Như bạn có thể thấy, điều này đặt Aurelia trong đối tượng cửa sổ để tôi có thể truy cập nó từ ứng dụng Angular của tôi, tôi sẽ cải thiện điều này sau. Trong ứng dụng góc của tôi, tôi có chỉ thị này:

'use strict'; 

function AureliaContainer() { 
    function Link($scope, element, attrs) { 
     window.aurelia.enhance(element[0]); 
    } 
    // 
    return { 
     restrict: 'A', 
     link: Link 
    }; 
} 

module.exports = AureliaContainer; 

tôi thiết lập này trong thư mục gốc ứng dụng của tôi với:

app.directive('aureliaContainer', require('./directives/aurelia.container')); 

Và trong Xem kiễu góc của tôi, tôi có những divs với chỉ thị của tôi mà các cuộc gọi enhance chức năng từ Aurelia:

<div aurelia-container> 
    <aurelia-component></aurelia-component> 
</div> 
<div aurelia-container> 
    <another-component></another-component> 
</div> 

Lý do tôi có hai aurelia-container trong html là tôi biết tôi sẽ phải có nhiều hơn một khi tôi là migra ting ứng dụng. Và điều này hoạt động tốt, cả hai thành phần tải bình thường trên màn hình. Vấn đề là khi tôi cố gắng gọi một thành phần khác từ bên trong một trong các thành phần đó. Những gì tôi đã làm là, tôi đã tạo một thành phần mới có tên là test-component.js với chế độ xem test-component.html. Html cho điều này chỉ là:

<template> 
    <h1>Header</h1> 
</template> 

Và sau đó, từ aurelia-component.html tôi gọi nó bằng cách sử:

<template> 
    <require from="./test-component"></require> 
    <div>${text}</div> 
    <test-component></test-component> 
</template> 

Bây giờ, khi tôi tải trang, tải test-component thực sự nhưng <div>${text}</div phần của aurelia-component không và tôi gặp lỗi này trong bảng điều khiển:

Uncaught (in promise) TypeError: Cannot read property 'behaviorInstructions' of undefined 

Tôi thực sự không hiểu tại sao lỗi này xảy ra, tôi nên b e có thể tải phần tử tùy chỉnh từ bên trong một phần tử thông thường khác, không nên I. Hoặc có giới hạn khi bạn sử dụng enhance không?

Tôi cũng đã cố gắng sử dụng setRoot trong cả hai div không thành công, chỉ một trong số đó được tải.

Có thể có cách tiếp cận tốt hơn cho điều này? Một lần nữa, tôi không thể di chuyển toàn bộ ứng dụng của mình cùng một lúc, nó không khả thi.

Cảm ơn bạn đã trợ giúp.

Answer 1

Trước hết, tôi không biết gì về việc tăng cường tiến bộ ở Aurelia. Và không thể bình luận về sự phù hợp của nó cho kịch bản của bạn.

Nhưng tôi tự hỏi nếu có thể bạn bỏ lỡ một số phụ thuộc Au (như ràng buộc hay khuôn mẫu?)

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8

aurelia.use 
    .defaultBindingLanguage() 
    .defaultResources() 
    .developmentLogging() 
    .globalResources('resources/my-component'); 

Điều đó có thể giải thích lý do tại sao nó không thành công khi bạn muốn nó để render một mẫu?