Question

我进入Angular 7已有两周了，在另一个孩子{{1}的点击事件之后，我正努力在父组件<app-child-2>中隐藏/显示子组件<parent> }放在同一父组件中。

如果所有子卡div都有数据，则仅呈现，这是通过父级<app-child-1>和ngIf的{{1}}方法完成的。 shouldCardRender()方法用于在显示之前通过父对象中的另一方法outputsMapToRead('Child 1')检查数据对象shouldCardRender()是否为groupName。如果为false，则不会在父项上呈现；如果为true，则运行另一个方法，该方法会将所有真实数据馈入子组件。

这是在父母中设置两个孩子的方式。

checked: true

我相信this.checkIfCardHasAnyCheckedValues()是对那个孩子的groupName进行分类的数据，并根据groupName为孩子提供真实的数据。

下面是<div *ngIf="shouldCardRender('Child 1')"> <app-child-1 [outputsArray]="outputsMapToRead.get('Child 1')" [rawData]="rawData"></app-child-1> </div> <div *ngIf="shouldCardRender('Child 2')"> <app-child-2 [outputsArray]="outputsMapToRead.get('Child 2')" [rawData]="rawData"></app-child-2> </div>和[outputsArray]outputsMapToRead.get('Child #')检查的数据对象的示例。如果选中true，则渲染卡片。请注意，一个普通的对象内部有将近20个对象，如果这些对象为true，则可以通过其他方法让这些卡访问儿童的数据以进行即插即用，目前所有“选中”键均设置为< strong> true。

shouldCardRender()

我的问题是this.checkCardValues()上有一个按钮，上面写着“显示outputsMap.set('Child 1', [ { name: 'fraudScore', friendlyName: 'Fraud Score', checked: true, groupName: 'Child 1' }, ..... ]); outputsMap.set('Child 2', [ { name: 'displayName', friendlyName: 'Display Name', checked: true, groupName: 'Child 2' }, ..... ]);”。我正在努力使<app-child-1>隐藏/显示，因为当前这取决于<app-child-2>和<app-child-2>中的数据对象。

我认为我必须在孩子上使用shouldCardRender和[outputsArray]并将其冒充给父母。但是我遇到了将数据变为假以隐藏组件所需的逻辑障碍。我还考虑过将选中的键更改为@Output并在子级或父级上设置方法？变成EventEmitter。

谢谢您的任何帮助。

Answer 1

好的，在开始讨论解决方案之前；我想描述一些有关父/子组件的重要信息。

您应使用@Input()装饰将数据从父级传递给 Child 。
您应使用@Output()装饰将数据从 Child 传递给 Parent 。

您可以在the documentation上了解更多信息。

属性绑定

@Input()，例如：

<child1 [name]="'testing'"></child1>

这意味着child1组件具有一个名为name的变量，该变量从 parent 组件获取其值。

@Output()以HTML形式使用事件绑定表示，例如：

<child1 (rebuild)="doSomething($event)"></child1>

这意味着child1组件具有名为rebuild的 EventEmitter ，它返回某种类型的值，我们使用以下方法在 parent 组件中捕获该值 $ event 。

这将如何帮助您？

我为您示例了如何处理您的案件，请检查here。

在此示例中，每个子组件都有一个按钮来显示其他组件，在此按钮上单击；子组件将传递一个boolean值，该值将从 parent 捕获并在*ngIf中使用。

希望对您有帮助。

父/子角单击事件：单击父组件中另一个子项上的单击事件后，父子组件中是否显示子组件？

1 个答案: