隐藏另一个组件中的元素

Question

在我的组件中，我有一个属性。

this.currentSection = section;

如果它的值为green，我想隐藏一个元素（.my-class），它来自另一个组件。

我该怎么做？

Stackblitz（组件A应该从组件B隐藏类.my-class）

Answer 1

使用Behaviorsubject并使用Inputs将currentSection的值发送到嵌套组件是解决此问题的最快方法之一。 DEMO 我添加了setTimeout来验证它是否有效。（在a.component.ts中）。

此外，您可以检查此框架，可能会有所帮助：NgRx

Answer 2

在组件A中，您需要@ViewChild（）装饰器。

 @ViewChild(ComponentB) refCmpB;

然后根据组件A中的值，检查条件并将其传递给组件B。

if (this.currentSelection === true) { 
    this.refCmpB.myClassProp = false;
}

在组件B的模板文件中使用此。.

<h1 [ ngClass ] = " myClassProp === true ? 'my-class- 
 show' : ' my-class-hide ' "> show / hide </h1>

ngClass在此根据给定条件选择.css类。