Как очистить выпадающие значения при переходе на обратную страницу в Angular 6

Question

Изображение В компоненте приложения у меня есть раскрывающийся список, если я выбираю любой параметр в раскрывающемся списке, он должен перейти на другую страницу. И я сделал это с помощью маршрутизации. когда я нажимаю кнопку «Назад», он должен перейти к компоненту приложения. Я тоже так делал .. Но проблема в том, что когда я возвращаюсь назад, я выбрал значение dropdwon, которое все еще присутствует там ..

    export class AppComponent {
      data;
      constructor(private router:Router){}
      list =['prodcuts','myorder'];

      selectOption(value){
        this.data=value;
        if(value==='prodcuts'){
        this.router.navigate(['/products']);
        }

      }


    <div class="container">
      <label>Summary: </label>
      <select (change)="selectOption($event.target.value)">
          <option value="0">--All--</option>
          <option *ngFor="let summary of list" value={{summary}}>
              {{summary}}
          </option>
      </select>
    </div>

    <router-outlet></router-outlet>

<button class="btn btn-info" routerLink="">Back</button>

Answer 1

Вы можете сделать функцию сброса и использовать ее на ngOnDestroy()

reset() {
    var dropDown = document.getElementById("myDropdown");
    dropDown.selectedIndex = 0;
}

ngOnDestroy(){
 this.reset();
}

Answer 2

Выход маршрутизатора генерирует событие деактивации, когда компонент уничтожается. Вы можете изменить router-outlet как -

<router-outlet
  (deactivate)='onDeactivate($event)'></router-outlet>

и затем записать сброс логики c в onDeactivate функцию.

Answer 3

Я предполагаю, что причина, по которой он не сбрасывается, в том, что ваш router-outlet находится внутри компонента приложения, где находится раскрывающийся список. Поэтому ваш компонент приложения сохраняется при смене страницы, и данные того, что было выбрано, также сохраняются. Я полагаю, что вы хотите это, чтобы вы могли отобразить его над страницей, к которой вы переходите, в пределах выхода маршрутизатора. Так как я не могу видеть ваш маршрут, я не могу сказать 100%, если это так, но если это так, см. Ниже.

Один из способов, которым вы могли бы заняться этим, было бы заключить выбор в реактивную форму. Затем вы можете запустить событие, когда пользователь щелкает обратно и сбрасывает форму.

<form [formGroup]="form">
    <select formControlName="pageSelect"></select>
</form>

<button class="btn btn-info" (click)="back()">Back</button>

form = this._fb.group({
    pageSelect: ['']
})

constructor(
    private _fb: FormBuilder
) {

}

back() {
    this.router.navigate(['']);
    this.form.reset();
}