当我在Angular 6中导航到主页时，如何清除下拉列表值

Question

Image In App Component我有一个下拉列表，如果我在下拉列表中选择任何选项，它应该导航到另一个页面。我已经通过路由做到了这一点。当我点击后退按钮时，它应该会将我导航到应用程序组件。我也这么做了。。但问题是，当我导航到后面时，我选择了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位于下拉列表所在的应用程序组件的内部。因此，当您更改页面时，应用程序组件会保持不变，所选内容的数据也会保持不变。我想你想要这个，这样你就可以在路由器出口内导航到的页面上方显示它。由于我看不到你的路线，我不能100%告诉你是否是这样，但如果是这样，请参阅下面。

解决这个问题的一种方法是将select包装成一个反应式表单。然后，当用户点击返回并重置表单时，您可以触发一个事件。

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

当组件被破坏时，路由器出口会发出停用事件。你可以像-一样修改你的router-outlet

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

然后在CCD_ 4功能中写入复位逻辑。