Как работает директива ngIf?

Question

[Магжан Биргебайулы]

Есть у меня несколько DOM елементов:

<myComponent *myIfDirective="'xs'">1</myComponent>
<myComponent *myIfDirective="'lg'">2</myComponent>

Нужно написать свою директиву myIfDirective, которая работает точно так же как и ngIf. Нужно понять - какая функция отвечат за рендер объекта и как его можно замарозить.
Первый блок для мобильной версии, второй для десктопной.

Значю что можно сделать с помощью CSS, но в компоненте могут быть ajax запросы, которые будут влиять на производительность.

Answer 1

[0xD34F]

Откройте исходники, да посмотрите.

Comments

[Магжан Биргебайулы]

Спасибо, нашел способ. Не подскажите - как перезапустить директиву? Мне нужно что бы при изменении размера окна, условия перезапускалась

[0xD34F]

Магжан Биргебайулы, а как вы "перезапускаете" обычный ngIf? - передайте новое значение. Как отследить изменение размеров окна, можете посмотреть здесь.

Answer 2

[Василий Мажекин]

Полностью решение вашей задачи https://github.com/ang5-examples/ui-kit/tree/maste...

<test-component *ifViewportSize="'small'" [value]="1"></test-component>
<test-component *ifViewportSize="'medium'" [value]="2"></test-component>
<test-component *ifViewportSize="'large'" [value]="3"></test-component>

Comments

[Магжан Биргебайулы]

спасибо, сейчас разберусь.

Не могли бы посмотреть мою логику решения задачи:
https://stackblitz.com/edit/vim8-2-resize-template...

есть 2 проблемы:
1. как получить данные от компонента (если они указаны) в директиве?
2. как перезапускать директивку, если параметр задан строкой?

[Василий Мажекин]

1) не надо получать директиве данные компонента они рендерятся через шаблон и управляются самим компонентом. Директива только отслеживает ширину экрана и управляет только отображением компонента.
2) второй вопрос не понял

[Магжан Биргебайулы]

Василий Мажекин,
1) Но ведь я запускаю функцию ifViewportSize в директиве и в зависимости от параметров компонента, после решаю - рендерить его или нет
2) Если размер окна меньше config.small, ifViewportSize должен перепроверить условия. Но он запускает его лишь раз, когда только компонент появляется

[Василий Мажекин]

1) директива запоминает значение ширины экрана и слушает сервис который присылает директиве актуальное значение экрана, если оно совпадает то директива показывает компонент (createEmbededView) если нет то скрывает (clear)
2) см ответ 1) - при изменении ширины окна браузера присылается новое значение

[Магжан Биргебайулы]

Василий Мажекин, скопировал ваш скрипт но не могу понять где ошибка:
https://stackblitz.com/edit/vim8-2-resize-template...

можете посмотреть - что я упускаю?

[Василий Мажекин]

В консоли ошибка: NullInjectorError: No provider for IfViewportSizeConfig!

Это значит нужно подключить сервис IfViewportSizeConfig в модуль app.module.

[Магжан Биргебайулы]

Василий Мажекин, https://vim8-2-resize-template-7w6fyy.stackblitz.io
app/if_viewport_size/directive.ts
21: console.log( this.ifViewportSizeService ); // undefined

почему не привязывается сервис?
можно ссылку на полную инструкцию - как работают сервисы в Angular?