Question

我在Angular2中有一个包含两个子组件（dataset-create和dataset-detail）的父组件。 Parent组件通过在其模板中使用此代码来控制在任何给定时间显示两个组件中的哪一个：

<div [ngSwitch]="mode">
<template [ngSwitchWhen]="'create'">
    <dataset-create [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-create>
</template>
<template [ngSwitchWhen]="'detail'">
    <dataset-detail [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-detail>
</template>
</div>

父组件侦听来自子组的事件(close)。当它收到它时，会调用一个回调函数（onDatasetFormClose()），它具有以下代码：

private onDatasetFormClose() {
    this.mode = "list";
}

此函数更改mode变量的值。这会导致两个ngSwitchWhen语句失败，从而导致当前活动的子组件被破坏。

另外，仅供参考，这是其中一个子组件的模板的样子：

<form novalidate="novalidate">
    <button type="button" (click)="onClose()">close</button>
    <button type="submit" (click)="onSubmit()">submit</button>
    <label for="dataFileD">data</label>
    <input id="dataFileD" type="file" (change)="onFileChange($event)">
</form>

然而，这个解决方案对我来说看起来“错误”，因为它依赖于父组件（因此更难以独立地重用它）。

我想另一种获得类似结果的方法是使用路由器。这个解决方案不仅听起来“过于臃肿 - 没有理由”，而且还遇到与上述解决方案相同的问题：子组件不能独立使用。

是否可以让子组件从DOM中删除？处理这种情况的正确方法是什么？也许让组件从DOM中移除是一个糟糕的Angular2编码实践？

提前致谢。

Answer 1

我认为组件需要父组件是好的。发出事件的组件通常需要父组件。并且有时组件更紧密地耦合，或者意图/要求一起使用。例如，要实现制表符，除了tabset子组件之外，我们可能还需要父tab组件。例如，见ng2-bootstrap tabs implmenentation。

依赖父组件也可能是有意识的设计决策。例如，如果我们使用不可变应用程序数据建模我们的应用程序（请参阅Savkin blog），我们可能会故意阻止我们的组件修改任何应用程序数据。如果需要删除操作，我们可能会发出一个事件，以便让某个更高级别的组件修改应用程序数据（然后通过输入属性将其发送回给我们）。

Answer 2

为什么你的子组件上没有布尔标志show。然后在需要时将其更改为false。在模板中，只需用

包装所有内容

Angular 2：从DOM中删除自己的组件

2 个答案: