Генерирование полимерного элемента с Angular2

Question

Я пытаюсь использовать полимерный элемент <paper-tabs> в сочетании с Angular2 нравится:

<paper-tabs> 
    <paper-tab *ngFor="#tab of tabs">{{ tab }}</paper-tab> 
</paper-tabs> 

С точки зрения углового в это правильно, но это полностью разрушает полимерный элемент.

Возможно, это связано с тем, что я изменяю внутренние элементы контента, которые являются placed inside paper-tabs using <content> tag.

See plnkr.co demo
(примечание: оно требует браузера отключен CORS, поскольку она связывает paper-tabs.html непосредственно из elements.polymer-project.org).

В демо-версии есть два <paper-tabs>. Первый - контроллер Angular2. Если вы нажимаете кнопку «добавить вкладку» несколько раз, она добавляет их в меню, пока вы не нажмете какую-либо вкладку. Затем они исчезают, и вы не можете добавлять больше вкладок. Второе меню - «ванильный» полимер, который находится вне угла и отлично работает.

Я использовал Полимерные элементы с Angular2 раньше. Например, <google-chart> работает хорошо, потому что мне пришлось передать переменную от углового до элемента. Это было легко, так как я мог напрямую установить атрибут элемента.

<!-- somewhere in a component's template --> 
<google-chart #chart></google-chart> 

Тогда где-то в реализации компонента:

var options = { 
    'legend': { 
     'position': 'none' 
    }, 
    'chartArea': { 
     'width': '80%', 
     'height': '75%', 
     'left': '15%', 
     'top': '5%' 
    } 
}; 

// grab the <google-chart> element 
var elm = this._viewManager.getNamedElementInComponentView(this._elementRef, 'chart').nativeElement; 
elm.options = this.options; 
elm.type = 'line'; 

Такое же отношение работает также для связывания событий, который хорошо объяснены в this video "Componentize your app with Polymer Elements" from AngularU by Rob Dodson.

Однако, использование <paper-tabs> отличается, и я понятия не имею, как его использовать. Такая же проблема будет с любым элементом Polymer, который опирается на свой внутренний HTML-контент, который вы хотите изменить с помощью Angular2.

Answer 1

Для использования тега <content> вам необходимо включить теневую DOM и загрузить полные полисы (webcomponents.js not webcomponents-lite.js) в браузерах, которые не поддерживают полностью DOM DOM.

Смотрите также https://www.polymer-project.org/1.0/docs/devguide/settings.html