Как изменить стиль дочернего angular компонента, чтобы он был того же размера, что и другой дочерний компонент

Question

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

<div class="container">
    <child-one></child-one>
    <child-two></child-two>
</div>

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

child-one {
    width: auto;
    height: auto;
    padding: 0.5rem;
}

и дочерний-два имеют фиксированную ширину и высоту в собственном s css.

child-two {
    width: 10rem;
    height: auto;
 }

есть ли способ каким-то образом изменить ширину дочернего-два в родительском без редактирования the child-two?

Я надеялся на что-то вроде сохранения ширины дочернего элемента one и установки того же значения для ширины child-two.

child-one { 
    width:auto;
    padding: 0.5rem;
    $width: this.width !global //idk about this one
 }

child-two {
    width: $width
    padding: 0.5rem
 }

обратите внимание, что child-one и child-two s css не выглядят в коде таким образом и обычно записываются, это просто для упрощения вопроса

Answer 1

Предложение

Предложение @ SivakumarTadisetti является допустимым. В качестве альтернативы вы можете использовать ngStyle для предоставления динамического c стиля для компонента или ngClass для условного применения класса стиля к компоненту. Вы могли бы, , для которого требуется больше кода , также написать директиву, которая изменяет поведение стиля компонента в зависимости от определенных условий.

Пример использования ngStyle

https://stackblitz.com/edit/stack-help-01

Answer 2

Это то, что вы ищете?

app.component. html - Родительский компонент

<child-one #childOne></child-one>
<child-two #childTwo></child-two>
<br>
<button (click)="changeWidth()">Change child two width</button>

app.component.ts

export class AppComponent {

  @ViewChild('childOne', {
    read: ElementRef
  }) childOne: ElementRef;
  @ViewChild('childTwo', {
    read: ElementRef
  }) childTwo: ElementRef;

  constructor(private renderer: Renderer2) {}

  changeWidth() {
    const childOneWidth = this.childOne.nativeElement.getElementsByClassName('child-one')[0].offsetWidth;
    const childTwoElement = this.childTwo.nativeElement.getElementsByClassName('child-two')[0];
    this.renderer.setStyle(childTwoElement, 'width', `${childOneWidth - 2}px`);
  }
}

Вот рабочий Stackblitz