表单控件值更改时如何更改视图？

Question

我有一个组件，它是带有[formControl]属性的搜索输入，当用户开始键入搜索时，我需要更改视图。 我试图通过在键入开始时将用户路由到“搜索视图”组件来实现此目的，但是当呈现新视图时，将清除搜索输入。 我需要用户能够在呈现“搜索视图”后继续键入他离开的位置。

SearchComponent.html

<input class="search-grid" type="search" [formControl]="searchControl">

import {Component, OnInit} from "@angular/core";
import {FormControl} from "@angular/forms";
import {Router} from "@angular/router";
@Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
    private searchControl: FormControl;

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.searchControl = new FormControl('');
        this.searchControl.valueChanges
            .subscribe(query => {                
            this.router.navigate(['/store-search']);
        });
    }
}