角度2：组件从DOM中移除自身

我在Angular2中有一个父组件和两个子组件（

dataset create

和

dataset detail

）。父组件通过在其模板中使用以下代码控制在任何给定时间显示两个组件中的哪一个：

<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>

此函数用于更改

模式

变量的值。这会导致

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编码实践

---

提前感谢。

我认为组件需要父组件是可以的。发出事件的组件通常需要父组件。有时组件耦合更紧密，或者打算/要求一起使用。例如，为了实现选项卡，除了

选项卡

子组件之外，我们可能还需要一个父

选项卡集

组件。例如，请参阅

---

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

为什么不在子组件上设置一个bloolean标志，比如

show

。然后在需要时将其更改为

false

。

---

在模板中，只需使用

包装所有内容，我认为组件需要父组件是可以的。任何发出事件的组件都可能需要父组件。例如，要实现选项卡，除了

选项卡

子组件之外，您可能还需要一个父

选项卡集

组件。实际上，您的观点很有意义。我决定采用这种方法！谢谢很高兴看到其他人有这种问题。实际上，我正在尝试让一个子系统向父系统发送数据（父系统显示数据）。起初，我使用另一个服务来保存数据，父级和子级都依赖于此。这真的很烦人，你在这里的东西解决了这个问题，我觉得应该这样做。@Chris，如果你共享的数据包含在数组或对象中（即引用类型，而不是基元类型（字符串、数字、布尔）），那么父级可以看到你在子级中对共享数据所做的任何更改，因为父对象和子对象共享相同的引用。有关更多信息，请参阅。它可能会简化您试图完成的任务。@MarkRajcok谢谢您的提示！我想我有一次这样做是偶然的，在这里，虽然我试图做更多的“在孩子点击一个按钮，让家长知道显示一些东西”。所以这是一个非常重要的事件，但当我试图耍其他鬼把戏时，我会记住你的暗示。

<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>