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

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 博客），我们可能会故意阻止我们的组件修改任何应用程序数据。如果需要删除操作，我们可以发出一个事件，以便让一些更高级别的组件修改应用程序数据（然后通过输入属性将其发送回给我们）。