Как отправить значение одного компонента формы ввода в другой компонент в Angular 6?

Question

Я хочу отобразить имя пользователя, введенное в компоненте входа в систему, в домашний компонент посредством маршрутизации после нажатия кнопки.

logincomponent.html

  <form>
     <label for="">User Name</label>
     <input type="text" #uname><br><br>
     <label for="">Password</label>
     <input type="password"><br><br>
     <button (click)="login(uname.value)">Login</button>
  </form> 

logincomponent.tc

   constructor(private router:Router) { }
     ngOnInit() {
     }

     login(uname:string){
       this.router.navigate(['home']);
       //alert(uname);
       //  console.log(uname);
    }

homecomponent.html

    <h3>Welcome to {{ userName }}</h3>

homecomponent.ts:

    constructor(private route:ActivatedRoute) { }
     userName : string;
     ngOnInit() {
       this.userName = this.route.snapshot.params.uname;
     }

Answer 1

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