Angular2 отображать компонент в тело

140
9

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


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


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


Спасибо!

спросил(а) 2021-01-19T15:00:44+03:00 6 месяцев, 2 недели назад
1
Решение
127

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

    Добавьте динамический компонент в модуль declarations и entryComponents
    Получить ссылку на root 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();

ответил(а) 2021-01-19T15:00:44+03:00 6 месяцев, 2 недели назад
64

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


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


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


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


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

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


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


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

ответил(а) 2021-01-19T15:00:44+03:00 6 месяцев, 2 недели назад
64

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


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


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

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


Динамически загружать компоненты

ответил(а) 2021-01-19T15:00:44+03:00 6 месяцев, 2 недели назад
64

Нет, нет.


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


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

ответил(а) 2021-01-19T15:00:44+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема