1. Trang chủ
  2. Câu hỏi và trả lời
  3. Nhiều phiên bản của cùng một ứng dụng gốc trong Angular 2

Nhiều phiên bản của cùng một ứng dụng gốc trong Angular 2

2016-08-30 18 views
5

chúng tôi tích hợp Góc 2 vào một trang kế thừa để làm cho mảnh chức năng trở nên thân thiện hơn. Cho đến nay, việc trao đổi các widget phụ trợ được hiển thị trước cho các mô-đun góc đã hoạt động rất tốt.Nhiều phiên bản của cùng một ứng dụng gốc trong Angular 2

Tuy nhiên tôi chạy vào một vấn đề mà tôi không biết phải giải quyết: Tôi đã viết một module/thành phần có thể xảy ra nhiều lần trên trang tại địa điểm khác nhau và với cấu hình khác nhau.

<body> 
    <div class='somewhere-on-the-page'> 
     <my-widget config='A'></my-widget> 
    </div> 
    <div class='somewhere-else-on-the-page'> 
     <my-widget config='B'></my-widget> 
    </div> 
    </body>

Here is a Plunker trường hợp. Bạn chỉ có thể thấy lần xuất hiện đầu tiên được khởi tạo. Có khái niệm nào về cách giải quyết vấn đề này không? Tôi nghĩ rằng tôi không thể sử dụng một thành phần wrapper kể từ khi tôi không thể di chuyển toàn bộ templating bên trong nó (các trang được trả lại trong các phụ trợ và các chỉ thị góc được đặt trong đó).

Chúc mừng

Nguồn

2016-08-30 Tom

Trả lời

2

Nhờ Tobias Bosch cho một số gợi ý ông đã trên github, đây là một phiên bản đã được điều chỉnh của một workaround ông đề nghị:

import {ApplicationRef_} from '<project-root>/node_modules/@angular/core/src/application_ref' 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [MyWidgetComponent], 
    entryComponents: [MyWidgetComponent] 
}) 
class MyWidgetModule { 
    constructor(injector: Injector, cfr: ComponentFactoryResolver, appRef: ApplicationRef) { 
    const widgetCompFactory = cfr.resolveComponentFactory(MyWidgetComponent); 
    $(widgetCompFactory.selector).each((_, el) => { 
     var compRef = widgetCompFactory.create(injector, [], el); 
     var upcasted = <ApplicationRef_> appRef; 
     upcasted.registerChangeDetector(compRef.changeDetectorRef); 
    }); 
    } 
}

Hãy cẩn thận khi nhập ApplicationRef_ từ file góc. Bạn cần phải nhập nó trực tiếp vì nó không được xuất khẩu theo mặc định trong các kiểu gõ góc. Hoặc bạn có thể sử dụng $('my-widget') (hoặc bất kỳ bộ chọn nào khác mà bạn muốn) để có được tài liệu tham khảo DOM của bạn, nhưng tôi nghĩ rằng nó sạch hơn để sử dụng bộ chọn được xác định trước trên thành phần.

Nguồn

2016-08-31 09:32:27 Tom

Các vấn đề liên quan

 Các vấn đề liên quan