如何使用角度 8 中的事件发射器将选定值从一个组件获取到另一个组件

Question

我有 2 个组件，一个登录和另一个主页。当我将下拉菜单更改为登录组件时，选择的值需要显示在主组件中。我已经将 onchange 事件从登录组件发送到主组件并显示值，但我仍然没有将值放入主组件。这是下面的代码

login.component.html

<select #mySelect (change)="onOptionsSelected(mySelect.value)">
<option value="one">one</option>
<option value="two">two</option>
</select>

login.component.ts

import { Component, OnInit,Input,Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router'; 
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
@Output() buttonClicked = new EventEmitter();
  constructor(private router: Router) { }
  @Input() item: string;
  ngOnInit() {
  }
onOptionsSelected(value:string){
     console.log("the selected value is " + value);
     this.buttonClicked.emit(value);
     this.router.navigateByUrl('/home');
}
}

home.component.html

<p>home works!</p>
<app-login (buttonClicked)='showNextComponent($event)'></app-login>
<p>Hello {{ name }} </p>

home.component.ts

import { Component, OnInit,ElementRef,ViewChild } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { LoginComponent } from '../login/login.component';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: any;
  constructor(private commonserviceService: CommonserviceService) { }
  name:string
  ngOnInit() {
     
  }

showNextComponent(value:string) {
    this.name = value;
    console.log(this.name);
  }
}

Answer 1

我在 stackblitz 中粘贴了您的代码：https://stackblitz.com/edit/angular-cfkqns

您被正确地发出值直到父组件并绑定要在父组件中显示的值。

它正在按照您的预期工作:-)

更新：

我在这里为其他人回答了同样的问题：

https://stackoverflow.com/a/64082745/450388

但是我已经更新了你的 stackblitz 以反映如何实现同样的目标。

https://stackblitz.com/edit/angular-cfkqns