Angular: Как изменить высоту дочернего элемента

Question

В настоящее время у меня есть такой макет

    <parent-comp>
       <child1> </child1>
       <child2> </child2>
    </parent-comp>

Родительский компонент имеет фиксированную высоту (1000 пикселей). У дочернего элемента 1 есть 2 состояния: расширенный (200 пикселей) и свернутый (10 пикселей). Я хотел бы использовать эту информацию длярассчитать и обновить высоту child2 соответственно

Я не хочу устанавливать высоту child2 автоматически (мне нужно конкретное значение, поскольку это требование для передачи его в другую библиотеку (виртуальная прокрутка))

Как мне этого добиться?

Я пытался ViewChild + ElementRef, чтобы получить высоту дочернего компонента из родительского компонента, но, похоже, это вызывает ExpressionChangedAfterItHasBeenCheckedError, когда я пытаюсь обновить высоту дочернего компонента

Если дочернийвывод компонента это его текущая высота для родителя или родитель должен прочитать его от своего потомка?

Answer 1

Да, вы правы.Вам необходимо Output значение от дочернего к родительскому, распространить его на нужные компоненты и выполнить ваши вычисления.Вот пример .Если вы хотите передать это изменение высоты на Components, кроме дочерних, то я бы предложил вам использовать SharedService, чтобы подписаться и внести изменения в значение (я).Братья или сестры или нет, таким образом, вы можете обмениваться данными между несколькими компонентами.

Если вы просто хотите обновить высоту, лучше использовать Flexbox или Сетки .

Answer 2

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

например,

.parent {
   display:Flex;
   flex-direction:column;
   flex-wrap:wrap;
   height: 1000px;
}

.child1 {
/*  expanded */
  flex: 0 0 20%;
}

.collapsed {
  flex: 0 0 2%;
}

.child2 {
  flex: 1;
}

, которые вы можете применитьсворачивается, классифицируется динамически с помощью ngclass, надеюсь, это поможет.

Если вы хотите узнать больше о flexbox, играйте в эти бесплатные игры на https://flexboxfroggy.com/ Надеюсь, это поможет.