Блог

Представьте, что я использую ngIf для визуализации (или создания) компонента и переключаюсь между компонентами на основе ngIf (или ngSwitch). Независимо от проблем с шаблоном (хотя я думаю, что лучше использовать маршрутизатор при переключении между компонентами), в случае производительности будет ли какой-либо прирост производительности, если я буду использовать розетки маршрутизатора вместо блоков ngIf (или наоборот)?

Визуализация

использование ngIf

 <ng-container *ngIf="condition === a">
   <a-component></a-component>
</ng-container>
<ng-container *ngIf="condition === b">
   <b-component></b-component>
</ng-container>
 

использование маршрутизатора-розетки

 <router-outlet></router-outlet>
 

Это зависит от компонента, в любом случае(розетка маршрутизатора или ngIf) компонент создается и уничтожается.

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

Кстати, с тяжелым я имею в виду потребление памяти javascript и перекраску DOM.

Проблем с памятью можно избежать, просто убедитесь, что у вас нет утечек памяти, но перекраски DOM не избежать, если вы слишком часто меняете DOM, тогда возникнут проблемы с производительностью.

Одним из решений, позволяющих избежать перекраски DOM, является использование hidden вместо ngIf .

<router-outlet> работает с использованием модуля RouterModule, что практически означает, что URL-адреса будут теми, которые выберут необходимый компонент для визуализации.

Это не одно и то же. При использовании ngIf URL-адрес вообще не изменится, и рабочий процесс будет совершенно другим.

Интересный вопрос, я работаю с Angular уже почти год, и это мое мнение:

Что выбрать и почему:

• Я думаю, это лишь вопрос того, насколько большой элемент, который вы пытаетесь скрыть и отображать, если его является для электронной.г контейнер с некоторым содержанием или карты, *ngIf имеет больше смысла, если его большая составляющая с множеством элементов и функций, работающих через него, возможно, есть дочерние компоненты, с помощью угловой маршрутизации имеет больше смысла, в основном из-за структуры разницы, как кто-то выше упомянул, угловой маршрутизации организует ваши компоненты очень хорошо в вашем приложении. Использование *ngIf для больших компонентов всегда будет грязным.

Есть ли разница в производительности?:

• Это зависит от того, какой метод маршрутизации вы используете, по умолчанию угловой загружает все ваши компоненты немедленно, и таким образом может возникнуть разница в производительности. Однако, если вы используете их метод маршрутизации с отложенной загрузкой для загрузки ваших компонентов, компоненты не загружаются до тех пор, пока по вашей команде не будет вызван модуль, который их содержит, и в этом случае между ними не будет разницы в производительности.

Проверьте ленивую загрузку docx здесь: https://angular.io/guide/lazy-loading-ngmodules

Надеюсь, это помогло