2016-01-13 22 views
7

Tôi có một bộ các thành phần polymer tùy chỉnh, mà tôi muốn sử dụng trong ứng dụng góc 2.Các nguyên tố polyme nằm trong góc 2 thành phần

Có vẻ như có sự cố liên quan đến thẻ nội dung của phần tử polymer. Nội dung của phần tử được hiển thị ở vị trí sai trong phần tử polymer, nếu phần tử nằm trong một thành phần góc 2.

Ví dụ:

Mẫu của nguyên tố polymer của tôi "nút của tôi" trông như thế này:

<template> 

    <button> 
    <content></content> 
    </button> 

</template> 

Sử dụng bên ngoài góc

Khi tôi sử dụng yếu tố này bên ngoài của góc của tôi 2 thành phần, tôi nhận được kết quả mà tôi mong đợi:

Sử dụng:

<my-button>Foo</my-button> 

Kết quả:

<my-button> 
    <button> 
    Foo 
    </button> 
<my-button> 

Sử dụng trong vòng góc 2 thành phần

Khi được sử dụng trong vòng một 2 phần góc cạnh, nội dung luôn được kết xuất vào cuối các yếu tố mẫu. Cũng giống như thẻ nội dung không tồn tại.

Sử dụng:

<my-button>Foo</my-button> 

Kết quả:

<my-button> 
    <button> 

    </button> 
    "Foo" 
<my-button> 

Câu hỏi

Vấn đề có thể được, mà polymer và góc 2 đều sử dụng thẻ nội dung cho transclution. Vì vậy, có thể mọi thứ trở nên lộn xộn một chút khi sử dụng cả hai cùng nhau.

Tôi rất thích sử dụng tất cả các phần tử polymer bên trong góc cạnh 2. Vì vậy, bất kỳ ý tưởng nào về cách sửa lỗi này sẽ được đánh giá rất nhiều.

+1

Bạn đã cố gắng lắng nghe 'sự kiện WebComponentsReady' trước khi áp dụng bất kỳ kịch bản góc? –

Trả lời

8

Có một vài vấn đề mở về Angular2 kết hợp với Polymer. Ví dụ Angular không sử dụng Polymer.dom(el)... để thao tác với các phần tử Polymer. Đây có lẽ là những gì phá vỡ các thành phần của bạn. Giải pháp thay thế là bật DOM đầy đủ và các vùng ghép. Xem https://www.polymer-project.org/1.0/docs/devguide/settings.html

Một vấn đề tôi đã không tìm thấy một giải pháp được nêu là đi qua <template> s (như yêu cầu ví dụ cho <iron-list>. Kiễu góc xử lý mẫu trên riêng của mình và không vượt qua nó để các yếu tố Polymer.

có một chỉ thị ngNonBindable. tôi đã không thử nó chưa vào <template ngNonBindable> bản thân mình nhưng nó có thể làm việc. tôi đã cố gắng có vẻ như đó chỉ phớt lờ [prop]="field"/prop="{{field}} bindings.

một vấn đề khác là với <style is="custom-style">.Chúng chỉ có thể được thêm vào trong phần tử <head> hoặc trong các phần tử Polymer, nhưng không được thêm vào thành phần góc.

Xem thêm Two-way binding in Angular 2 with NgModel and mutating bound property?

+0

ive đã cố gắng các thành phần polymer, lấy ví dụ như các hộp kiểm giấy, bây giờ nếu tôi ràng buộc tài sản kiểm tra '[checked] =" myselection "' nó đơn giản đặt boolean nhưng không nhận được nếu kiểm tra? Có giải thích tại sao các yếu tố này hoạt động theo cách như vậy không? PS i đã bật dom = 'shady' –

+0

@PratikKelwalkar Polymer với DOM mờ ám không hoạt động tốt với Angular2. Thay vào đó, tôi khuyên bạn nên bật DOM bóng. Không chắc chắn ý bạn là gì "nhưng không nhận được nếu được chọn". Bạn sẽ cần '[checked] =" myselection "(checkedChanged) =" myselection = $ event "' (không tự kiểm tra) –

+0

Ok cảm ơn zoechi, il hãy thử, những gì tôi muốn là tìm hiểu xem hộp kiểm đã được kiểm tra hay chưa thuộc tính [đã chọn], nhưng tôi không thể nhận được boolean, thay vào đó chỉ có thể đặt giá trị. –

7

Check-out https://www.npmjs.com/package/@vaadin/angular2-polymer, mà nên giải quyết hầu hết các vấn đề trong việc tích hợp các yếu tố Polymer để kiễu góc 2.

Hướng dẫn: https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc

Tutorial (dự thảo): https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc

Hỗ trợ DOM mờ ảo hơn đang chờ để được hợp nhất từ ​​một nhánh riêng biệt (nên được hợp nhất và phát hành trong vòng hai tuần): https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

Sẽ rất tuyệt nếu bạn có thể dùng thử và xem nó có phù hợp với bạn không!

Cuối cùng, các tài liệu sẽ được công bố tại https://vaadin.com/docs/

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