Javascript 当零部件B出现在“角度”视图中时，替代零部件A中的样式

我有两个相同级别的组件：

<app-parent>
    <app-component-a></app-component-a>
    <app-component-b></app-component-b>
</app-parent>

但是我想更改组件a的容器的高度，当组件b出现在视图中时。假设componen-b是隐藏的，可以使用上面的默认高度，但是当componen-b可见时，下面的样式应该覆盖上面给出的高度

height: 2rem;

关于如何实现这一目标的任何建议。 我已尝试在组件b上使用以下选项，但没有任何帮助：

:host-context(.container) {
 height: 2rem;
}

如果代码中添加了

[ngClass]

，则已更新代码以实现此功能：

<div class="container" [ngClass]="{'area-height': showArea}">

现在我想看看是否有一种方法，如果我们可以从另一个组件连接布尔值？

---

现在，添加了随机布尔生成器来显示/隐藏组件-b，这里有两种可能的解决方案：

解决方案A

要求：两个部件的显示高度（当两者都显示时）大于或等于10rem

要求：当组件B被隐藏时，在显示时它所占据的区域内不应显示任何内容

1） 将两个构件包裹在一个图元中，固定高度等于构件B的高度加上2rem

2） 设置组件A的最小高度为2rem，最大高度为10rem

结果：当部件B被隐藏时，部件A的全高为10雷姆。当组件B显示时，组件A将收缩至最小2rem

解决方案B

要求：组件中存在（或可能存在）跟踪组件B的显示/隐藏状态的属性

1） 以类似于以下示例的方式在组件A上使用：

<app-component-a [ngStyle]="{'height':isComponentBShown ? '2rem' : '10rem'}"><app-component-a>
<app-component-b [showArea]="isComponentBShown"><app-component-b>

结果：当IsComponentShowed布尔值计算为true时，组件A的高度设置为2rem。否则设置为10rem

---

在这两种方法中，我推荐解决方案B

您完全可以使用angular提供的主机内容来实现这一点。假设我们有两个组件——组件A和组件B，正如我们在您的需求中所做的那样

我正在对应用程序组件中的按钮隐藏组件B。只需将css类切换到组件a的祖先，以响应组件B的切换。我已经为您创建了一个stackblitz，如果我缺少任何东西，请告诉我

Stackblitz链接-

下面是您需要查看的重要代码

//app component.ts
进口{
组成部分
}从“@angular/core”开始；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
isBVisible=true；
toggleB（）{
this.isBVisible=！this.isBVisible；
}
}

/*组件A css*/
.货柜-a{
边框：1px纯红；
高度：10雷姆；
}
/*如果组件a在其祖先中找到bPresent css类名，则将css应用于组件a*/
：主机上下文（.bPresent）.container-a{
身高：4rem；
}

切换b

也许您可以使用简单的CSS处理它？例如，如果

component-a

是

最后一个子项

，则可以创建不同的样式（请参见修改后的示例）：

---

这是我的stackblitz样本

---

实际上，您所需要的只是基于某个compB属性应用某个类

您是否可以完全控制这两个组件的代码？如何显示/隐藏b组件？是的，我可以使用布尔值完全控制要显示/隐藏的两个组件，并在触发事件时将其设置为true或false。请在stackblitz中更新显示/隐藏逻辑，以便我们知道从何处应用逻辑（在父级或子级本身中）。我将组件更新为true，现在。但我只是想看看b组分是否存在a组分的高度应该小于或等于0rem；需要覆盖随机布尔生成器添加的组件A上的现有高度，现在，要显示/隐藏组件B在哪里声明和处理“IsComponentBshow”？此外，尝试了上述方法，但无效。该变量（IsComponentBshow）将在app.component.ts中声明。其想法是，无论将组件B切换为显示/隐藏，都将在app.Component中发生。但是，如果它发生在一个子组件中，您可以连接一个输出属性，将布尔值传递回父组件（app.component）。当app.component检测到该输出属性中的更改时，它会相应地设置IsComponentBlow。

<app-component-a [ngStyle]="{'height':isComponentBShown ? '2rem' : '10rem'}"><app-component-a>
<app-component-b [showArea]="isComponentBShown"><app-component-b>

:host {
  .container {
    height: 10rem;
    background: blueviolet;
  }
  .area-height{
    height: 2rem;
  }
}

// if component-b is present
:host:not(:last-child) {
  .container {
    height: 2rem;
  }
}