Это хорошая идея использовать ComponentFactoryResolver в приложении Angular7?

Question

Я хочу создать веб-приложение с углом 7 (внешний интерфейс) для загрузки компонентов другого типа, таких как этот пример. https://angular.io/guide/dynamic-component-loader

Но я не уверен, стоит ли использовать ComponentFactoryResolver. Я никогда не использовал, и я не знаю, стабильно ли это и как насчет производительности.

Мне бы хотелось узнать ваше мнение об этом, и если кто-нибудь знает альтернативы. Я не хочу использовать native innerHTML

Спасибо !!

Answer 1

Да, хорошо использовать ComponentFactoryResolver, поэтому в официальной документации.Он стабилен, он внутри, начиная с Angular 2. У него нет существенного снижения производительности.

Многие библиотеки Angular используют его внутренне, а также Библиотека Angular Material .Проверьте портал внутри комплекта разработки компонентов (CDK) и его источник в GitHub , где вы можете увидеть, как он используется для отображения динамического контента внутри него.

Относительно вашегоНа вопрос, лучше ли сделать NgSwitch или создать компоненты с использованием ComponetFactoryResolver, ответить сложно, поскольку это зависит от того, что вы пытаетесь сделать, и вы не объяснили, каков именно ваш сценарий.Я бы сказал, что в большинстве случаев вам следует использовать ComponentFactoryResolver, поскольку он позволяет динамически добавлять любой компонент, и у вас нет большого компонента с огромным NgSwitch для всех возможных динамических компонентов.Только в том случае, если у вас очень мало динамических компонентов, и вы не ожидаете, что новые будут добавлены, их будет проще создать с помощью NgSwitch.

Answer 2

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

Шаги, чтобы «создать» компонент с помощью FactoryResolver service:

1. создает экземпляр класса компонента с помощью метода resolveComponentFactory(): этот метод принимает в качестве параметра тип компонента и ищетсоответствующая «фабрика компонентов».
   Примечание: фабрики компонентов - это классы, созданные Angular для каждого объявленного компонента с целью создания новых компонентов
2. «добавление» нового компонента кпросмотр с использованием метода createComponent() класса ViewContainerRef

Для информации: https://angular.io/guide/dynamic-component-loader#resolving-components

Шаги, применяемые при структурной директиве (ngIf, ngSwitch ...) 'создает' компонент:

1. директива создает встроенное представление с предоставленным шаблоном.Для этого он также использует класс ViewContainerRef (метод createEmbeddedView()).
2. В случае, когда это представление содержит селектор компонента, Angular создает новый класс компонента, также используя соответствующую фабрику, которая будетбыть добавлен к представлению.

=> оба метода проходят примерно одинаковые шаги (фактически метод «структурная директива» добавляет дополнительный шаг, создание встроенногопредставление, которое, я думаю, ничтожно мало).

Поэтому, на мой взгляд, наиболее ценной причиной для выбора одного из двух вариантов является вариант использования , который я бы суммировалследующим образом:

Структурная директива (ngIf, ngSwitch ...):

• полезно, когда имеется несколько компонентов

Служба FactoryResolver:

• позволяет избежать длинного списка компонентов (как упоминалось в предыдущем ответе)
• лучшее разделение интересов (шаблон,или родительский компонент, возможно, не нужноосведомлен о списке всех компонентов, которые могут быть созданы)
• требуется для отложенной загрузки динамических компонентов (я рекомендую это для получения дополнительной информации: https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e)