Angular：更好地使用ngIf

Question

假设我有一个只有在未定义发送的输入数据时才显示子组件的情况。我可以用以下方式编写代码：

<child-component input-value= "inputData"></child-component>

// then in child component template:

<div *ngIf="ctrl.inputValue">
    //Child component contents
</div>

或

{{1}}

哪种方法更好？有什么权衡？

Answer 1

将数据传递给子项

时，它应位于父组件上

<child-component *ngIf="inputData" input-value= "inputData"></child-component>

使用这种方式，您可以在显示add子组件的父级中提供true，在父级中提供false，其中应该使用其他路径！

Answer 2

你的第一个代码本身会起作用。

a <- raster(canopy)
i <- which(values(canopy) >= 1)    
a[i] <- canopy[i]

如果单独获得价值，您的子组件将可见。

Answer 3

<child-component *ngIf="inputData" input-value= "inputData"></child-component>

在上面的行中，如果没有数据，ngIf将不会呈现子组件。

//Parent Component
<child-component input-value= "inputData"></child-component>

//Child Component

<div *ngIf="ctrl.inputValue">
    //Child component contents
</div>

在上面的代码中，它遵循3个步骤，

• 将值传递给子组件
• 调用子组件组件以呈现
• 评估条件并渲染div标签

第一个是与第二个相比更优化的解决方案。