将数据从一个组件传递到 angular4 中的另一个组件

Question

我的 Angular 应用程序中有两个组件（Component1 和 Component2）。我在我的应用程序组件中呈现了这两个组件。现在我想将一个值从 Component1 发送到 Component2。如何发送。有没有最佳实践？？

在 Component1 我有一个这样的代码。组件1.html

<button (click)="passData()">Click Me</button>

组件1.ts

import { Component, OnInit , Output , EventEmitter } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

   Component1Variable:string="Component1VariableSent";
  constructor() { }
  ngOnInit() {
  }
   @Output()
   SendValue=new EventEmitter<string>();
   passData()
   {
        this.SendValue.emit(this.Component1Variable);
   }
}

在 Component2.html 我有

<app-component1 (SendValue)="ValueFromComp1($event)"> </app-component1>
{{ValueFromComponent1}}

在 Component2.ts 我有

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

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {
  ValueFromComponent1:any;
  constructor() { }

  ngOnInit() {
  }
  ValueFromComp1(var1:any)
  {
      this.ValueFromComponent1=var1;
  }

}

在 appcomponent.html 我有这样的代码。

<app-component1></app-component1>
<app-component2></app-component2>

现在我开始将值从 component1 发送到 component2。但是输出中有两次单击按钮。

另一个问题是我想将数据从一个组件传输到另一个组件，该组件位于组件树的同一层次结构中。通过以上述方式进行操作，我不会在组件树的同一层次结构中获取组件。

Answer 1

您可以通过三种方式完成相同的任务。

• 事件发射器（对于组件具有父子关系的情况）
• 共享服务
• Ngrx（针对大型项目的更广泛的共享服务）