Получить ширину и высоту дочернего компонента с применением ngIf

#angular

Вопрос:

У меня есть родительский компонент с дочерним компонентом, который заполняет себя с помощью NgFor . Родительский элемент определяет свойство childIsVisible = false и привязывает к нему дочерний *ngIf="childIsVisible" элемент, поэтому изначально дочерний элемент не отображается.

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

Моя проблема в том, что в родительском методе, который изменяет видимость, я не могу получить ширину дочернего компонента, потому что он еще не отображается. То, что я хочу, — это какой-то метод переключения видимости, а затем, как только дочерний компонент отображается, получить его ширину и расположить его соответствующим образом.

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

Надеюсь, это имеет смысл, любые мысли о разных способах подхода к этому были бы замечательными.

Приветствия

1. если бы вы могли что-то показать в plunker.

2. Я не могу разобраться в plnkr. Пытался что-то настроить, используя шаблон NG2, но все, что я добавляю, похоже, нарушает его, и я не могу понять, как отлаживать все, что я пишу. Хотя у него будет еще одна трещина, я знаю, что довольно бессмысленно пытаться описать это без примеров

Ответ №1:

Возможно [hidden]="!childIsVisible" , это могло бы решить проблему. Он будет представлен в DOM, просто будет невидимым до тех пор, пока childIsVisible не переключится на true . Дайте мне знать ваши результаты!

1. Это делает свое дело, хотя я буквально только что закончил читать какое-то сообщение в блоге , в котором утверждалось, что это плохая идея и использовать ngIf вместо этого.

2. Просто быстрое решение. Не имеет большого значения, но вы правы, сэр. ngIf это лучшая практика, я думаю, что это может быть как раз для вашей задачи. Дайте мне знать, если вы найдете что-то более элегантное!

3. Это абсолютно правильный ответ, и на данном этапе я за быстрое решение. Я пока остановлюсь на этом с примечанием, чтобы подробнее изучить его позже. Спасибо за вашу помощь