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

Question

我的 Angular 应用程序中有两个组件(Component1 和 Component2)。我在我的应用程序组件中呈现了这两个组件。现在我想将一个值从 Component1 发送到 Component2。如何发送。有什么最佳做法吗？？

在 Component1 中我有这样的代码。Component1.html

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

Component1.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

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

• Event Emitters (对于组件有父子关系的情况)
• Shared Services
• Ngrx (为大型项目提供更广泛的共享服务)