Angular2: Файл этикетки вход управления сохраняет свое состояние после разрушения компонента

Question

У меня есть компонент Angular2 (назовем его dataset-create), который включает в себя форму:

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

В close() и submit() функции испускает (close) событие, которое делает родительский компонент для отключения dataset-create компонента:

<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) события dataset-create компа onent следующей функции в родительском компоненте:

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

Так вот мой первый вопрос: Каждый раз, когда mode переменная переключает между 'create' и что-то иначе dataset-create компонент создается и уничтожается. Верный? Верный! Я проверил его, добавив console.log("foo"); в constuctor на компоненте dataset-create.

Вот моя проблема сейчас: Если выше указано правильно, почему метка ввода файла сохраняет значение после отправки (таким образом, уничтожая компонент dataset-create) форму?

Чтобы сделать вещи более ясно, вот шаги, я следую:

• я поставил как-то mode переменной 'create'. Построен компонент dataset-create. Кнопка ввода файла теперь имеет метку No file chosen.
• Я нажимаю кнопку ввода файла и выбираю файл (скажем, foo.png). Теперь на этикетке ввода файла есть метка foo.png.
• Я нажимаю кнопку отправки в форме. Компонент dataset-create уничтожен.
• Я установил как-то mode переменную до 'create'. Построен компонент dataset-create. Кнопка ввода файла теперь имеет метку foo.png. Зачем? Почему метка управления вводом файлов сохраняет свое предыдущее состояние?

Answer 1

Как было предложено @AstrOne

Это было поведение до beta.0. Angular2 используется для повторного использования созданной DOM (см., Например, #4478, #5188). В качестве обходного пути нам пришлось использовать APP_VIEW_POOL_CAPACITY, чтобы указать угловому2 не кэшировать DOM.

Начиная с бета-версии 1, это уже не проблема, и использование APP_VIEW_POOL_CAPACITY больше не требуется. Как часть #5993 каждый узел DOM воссоздается должным образом (см. @ Tbosch's comment).