Привязать значение к ngModel в других компонентах Angular 7

Question

допустим, у меня есть этот компонент:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main',
  template: `<div class="border">
  <h1>Simple Date Converter</h1>
  <br>
  <br>
  <p>Input RFC-3339 Formatted Date:</p>

    <div id="in" class="block">
      <input #myInput [(ngModel)]="inputValue">
        <br> <br>
        <button class="btn" [routerLink]="['result']">Convert Date</button>

        <p>{{ inputValue | date:'EEEE, d MMMM, y' }}</p>
    </div>
  <br>
  <br>
</div>  `,
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

, а затем, когда я нажимаю кнопку, он должен перенаправить на другой компонент, подобный этому

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-result',
  template: `<div class="results">
  <h1>Simple Date Converter</h1>
  <br> <br>
  <p>Converted result</p>
  <br><br>
  <p>{{ inputValue | date:'EEEE, d MMMM, y' }}</p>
  <br>
  <a routerLink="">back to main page</a>
  </div>`,
  styleUrls: ['./result.component.css']
})
export class ResultComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

вопрос в том, как я могу связать/ использовать значение «inputValue» в первом компоненте в другом компоненте, например компоненте результата, некоторые советуют мне использовать генератор событий, но он почему-то не работает, я новичок в angular 7, поэтому я неЯ не знаю, является ли синтаксис неправильным или что-то еще в этом отношении, поэтому я решил показать здесь все компоненты, так что, возможно, вы, ребята, сможете понять ситуацию

Answer 1

Существует два способа взаимодействия двух компонентов:

• услуги
• некоторый магазин (ngrx)
• входы / выходы
• прохождениесостояние через маршрутизатор (например, параметры запроса, параметры, состояние)
• ...

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

В вашем случае я бы предложил передать состояние при навигации.

<button class="btn" [routerLink]="['result']" [state]="{inputValue: inputValue}">Convert Date</button>

, а затем вы можете получить доступ к состоянию во второмкомпонент:

export class ResultComponent implements OnInit {
    inputValue;

    ngOnInit(): void {
        this.inputValue = history.state.inputValue;
    }
}