Angular: как перенаправить на другую страницу после отправки

Question

Я разработал это приложение (http://www.anelmad.com) и пытаюсь перенаправить отображение информации (словарные определения слов) при отправке (ввод или нажатие кнопки) на другую страницу.

Перенаправлениеработает, но содержимое страницы не следует.

в home.component.html:

<form #myForm>
     (...)

    <input type="text" class="form-control" #elem 
    (keyup)="onNameKeyUp(elem.value)"
    [ngModelOptions]="{standalone: true}"
    [(ngModel)]="latinButton"
    (focus)="onNameKeyUp(elem.value)"
    placeholder="Enter"/>

    <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="submit" 
    (click)="getWordList()">
            <i class="fa fa-search"></i>
        </button>
      </span>

После этой формы я добавил:

 <router-outlet></router-outlet>

Внутриhome.component.ts, я добавил (this.router.navigate) с новой страницей в качестве аргумента:

  getWordList(){
  this.router.navigate(['/words']);
  this.webservice.getWords(this.spelling, this.selected)
  .subscribe((res: Array<Word>)=> {
  (...)

в app.module:

const myRoutes: Routes=[
  {path: 'words', component: WordsComponent},
  {path: 'about', component: AboutComponent},
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: '/home', pathMatch:'full'},
  {path: '**', redirectTo: '/home', pathMatch:'full'

]

Как передать информацию, отображаемую из формы, на новую страницу (words.component.html)?

Answer 1

Существует множество способов передачи данных от одного компонента другому маршрутизируемому компоненту:

• Создание службы. Из первого компонента введите данные в службу.Из второго компонента читайте данные из сервиса.Поскольку служба Angular является одноэлементной (когда служба зарегистрирована с помощью инжектора root), она распределяется между всеми компонентами.

У меня есть рабочий стек, который демонстрирует это здесь: https://stackblitz.com/edit/angular-simpleservice-deborahk

В примере используется простой элемент ввода, но вы можете расширить его, включив в него все данные формы.

• Использовать параметры маршрута: если вам просто нужно передатьотдельный элемент или несколько элементов, вы можете использовать параметры маршрута.Angular предоставляет обязательные, дополнительные параметры и параметры запроса, которые можно использовать для передачи данных по маршруту от одного компонента к другому.

• Новое свойство State: используйте новую функцию Angular v7.2, котораяпозволяет передавать состояние между маршрутами.Смотрите эту ссылку для получения дополнительной информации об этой последней опции: https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb