Angular2 render component to body

Скажите, что у меня есть компонент Angular2 <my-button>, и я хочу дать ввод для параметров рендеринга в выпадающем меню, отображаемом при нажатии кнопки. У меня есть компонент меню как <my-menu> и оказывает условно в шаблоне <my-button>, если есть варианты, принятые в.Angular2 render component to body

Может быть, я могу просто абсолютно позиционировать <my-menu> внутри <my-button> для достижения желаемого позиционирования. Но, может быть, я не могу, потому что у меня есть overflow:hidden на содержащем элементе, и это сделает клип <my-menu>. Поэтому вместо этого мне нужно сделать <my-menu> в <body> и установить его на <my-button>.

Есть ли способ визуализации <my-menu> в <body>, хотя он помещен внутри шаблона для <my-button>?

Спасибо!

источник

2016-08-25 Comptonburger

Нет, нет.

Вы можете загружать компонент вне своего AppComponent и обмениваться данными с использованием общей службы.

Некоторые дискуссии о динамическом создании компонентов как родственного брата на AppComponent обсуждаются в https://github.com/angular/angular/issues/9293, но неясно, как, когда, или когда это может приземлиться.

источник

2016-08-25 05:28:33

Rendering внутри 'AppComponent' бы, вероятно, будет хорошо, нет необходимости самонастройки что-то дополнительно. Но можете ли вы подробно рассказать об использовании общего сервиса? В основном, как бы вы отображали меню и кнопку в радикально разных местах в дереве компонентов, а затем ассоциировали их? – Comptonburger

Должно быть объяснено в https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

@ GünterZöchbauer, как я уже сказал в комментарии ниже, так много шаблонов и вездесущих функций требуют возможности добавлять произвольные компоненты в '': модалы, всплывающие подсказки, похожие на рычание уведомления, меню, описанные OP ... Любая идея, как можно добиться любого из них в версии 2.0.x (GA)? – AndyPerlitch

Да, вы можете. Поскольку вы не предоставили код, я не могу дать вам обновленный пример. Однако, когда я создал модульную систему, я использовал ее в качестве базы: https://github.com/shlomiassaf/angular2-modal

Когда мы изначально вытащили ее, она была не очень многоразовой, но есть способ получить корневой узел через ApplicationRef. (Это было вокруг Angular 2 beta 8.)

Это определенно выполнимо.

UPDATE: Вы можете использовать ApplicationRef, чтобы получить место для ввода, и DynamicComponentLoader, чтобы ввести новый компонент. Используя следующую строку в качестве вашего hostLocation (второго параметра в loadIntoLocation методы DynamicComponentLoader в) поместишь элемент только после того, как компоненты приложения в HTML:

this.appRef['_rootComponents'][0].location

appRef является ссылкой на ApplicationRef, который передается в конструктор моего компонента.

Возможно, вы сможете играть с другими элементами или методами, которые вышли после бета-версии .8, чтобы получить желаемый эффект.

Вот еще один хороший сайт с большим количеством примеров: https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.x913qdh4u

источник

2016-09-30 18:53:55 ps2goat

Доступен ли 'DynamicComponentLoader' с угловым2 GA? Я не могу найти документацию по этому вопросу, и, похоже, он несколько связан с ComponentResolver, который полностью устарел в пользу «Компилятора». – AndyPerlitch

На самом деле это выглядит так, как если бы ссылка на сайт medium.com не показывалась для angular2 – AndyPerlitch

@AndyPerlitch - вот почему я назвал пример бета-версией, которую я использовал. Я думаю, что я смог все еще сделать это в RC 1, но мне приходилось напрямую связываться с более глубоким файлом, чем они показывались в основном пакете, который угловая команда посоветовала не делать. Я не пробовал это с RC 1, но я могу попробовать его в финальной версии. – ps2goat

Вы можете сделать это, однако это сложно.

Добавить динамический компонент в модуль declarations и entryComponents
Получить ссылку на корень ViewContainerRef инъекционного его к компоненту приложения.
Получить ссылку на ComponentFactoryResolver, также используя инъекции.

использовать что-то вроде этого:

private resolverFactory:ComponentFactoryResolver; 
private viewContainer:ViewContainerRef; 

var compFactory:ComponentFactory<Frame> = this.resolverFactory.resolveComponentFactory(Frame); 

var cmpRef:ComponentRef<Frame> = this.viewContainer.createComponent(compFactory, this.viewContainer.length);

Удаление компонентов:
```
cmpRef.destroy(); 
```

источник

2016-10-03 21:44:14 kemsky

Если вы хотите загрузить компонент условно можно использовать ComponentResolverFactory.

Все, что вам нужно сделать, это иметь один экземпляр viewContainerRef & обновить его, используя компилятор, где хотите.

Я порекомендую создать отдельный модуль для всех компонентов, которые вы хотите динамически загружать. & загружает их асинхронно.

Возможно, ниже ответ может помочь вам в лучшем виде.

Load Components Dynamically

источник

2016-10-05 15:01:29

Angular2 render component to body

ответ

Смежные вопросы