Angular 5 как очистить input у другого компонента?

Question

[Даврон Файзиев]

Доброго времени суток!
Я изучаю Angular 5 и чтобы получше освоить Angular решил сделать маленький блог с поиском, у меня почти все получилось и поиск работает, но возникает 2 вопроса:
1) Как мне очистить Input который является частью Navbar Компонента, к примеру при переходе на "Главная страница"
2) Как мне взять в Navbar Компоненте параметр :query который принадлежит SearchComponent, для того чтобы при перезагрузке страницы взять параметр :query и его значение присвоить input'у ( [(ngModel)]="query" )

Вот как прописан роуты

const appRoutes: Routes = [
    {
        path: ':lang',
        component: HomeComponent,
        children: [
            {
                path: 'post',
                component: PostComponent,
                pathMatch: 'full'
            },
            {
                path: 'search/:query/:page',
                component: SearchComponent
            },
           .... Другие роуты
        ]
    },
];

Это функция для обработки (ngSubmit) у формы с input

@Component(...)
export class NavbarComponent {

    /** For search input **/ 
    query: String = '';
    ...

    /** Form (ngSubmit) handler  **/ 
    submitForm() {
        if (!!this.query)
            this.router.navigate([`/${this.currentLang}/search`, this.query, 1]);
    }
}

<!-- Begin Search -->
               <form class="form-inline my-2 my-lg-0" (ngSubmit)="submitForm()">
                   <input class="form-control mr-sm-2" type="text" [(ngModel)]="query">
               </form>
            <!-- End Search -->

Как мне это можно сделать правильно с точки зрения Angular архитектуры ?

Заранее спасибо )

Answer 1

[Артур]

/** Form (ngSubmit) handler  **/ 
    submitForm() {
        if (!!this.query)
            this.router.navigate([`/${this.currentLang}/search`, this.query, 1]);
            this.query = '';
    }