当我导航到 Angular 6 中的后页时如何清除下拉列表值

Question

Image In App Component I am having the dropdownlist, IF I select any option in the dropdown it should navigate to another page.And I have done this through routing. when I click on back button it should navigate me to the app component. I also did this.. But the problem is when I navigate to back, I selected dropdwon value is still present there..

    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

Im guessing the reason it is not resetting is because your router-outlet is inside off your app component where the drop-down is. Therefore your app component persists when you change page and the data of what has been selected will also persist. I imagine you want this so you can display it above the page you navigate to within the router outlet. As i cannot see your routing i cannot tell 100% if this is the case, but if it is please see below.

One way you could tackle this would be to wrap the select in a reactive form. You could then fire an event when the user clicks back and reset the form.

<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();
}

Answer 2

You could make a reset function and use it on ngOnDestroy()

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

ngOnDestroy(){
 this.reset();
}

Answer 3

A router outlet emits a deactivate event when a component is destroyed. You can modify your router-outlet like -

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

and then write resetting logic in onDeactivate function.