У меня есть один родительский компонент с двумя дочерними компонентами (dataset-create и dataset-detail) в Angular2. Элементы управления Родитель компонент, который из двух компонентов показан в любой момент времени с помощью этого кода в шаблоне:Угловой 2: Компоненты, удаляющиеся из DOM
<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, и, следовательно, текущий активный дочерний компонент будет уничтожен.
Кроме того, FYI, это как шаблон одного из дочерних компонентов выглядит следующим образом:
<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?
Заранее спасибо.
Я думаю, что для компонента требуется материнский компонент. Любой компонент, который испускает событие, вероятно, требует родительский компонент. Например, чтобы реализовать вкладки, вам, вероятно, понадобится компонент «tabset» родителя, в дополнение к дочерним компонентам «tab». –