Question

我的Angular应用程序中有两个组件（Component1和Component2）。我在我的app组件中呈现了这两个组件。现在我想从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。但是在输出中有两次单击按钮。

另一个问题是我想将数据从一个Component传输到另一个组件，该组件位于组件树的同一个组件中。通过以上述方式进行，我没有将组件放在组件树的同一个组件中。

Answer 1

如果要将数据从父组件传递到子组件，则应使用 @input 。

在您的情况下，您希望将数据从一个组件传递到另一个组件，这些组件位于同一级别。我建议你去共享服务。

请查看 answer 以获取更多详细信息。

Answer 2

有三种方法可以完成同样的工作。

Event Emitters（对于组件具有父子关系的情况）
Shared Services
Ngrx（大型项目的更广泛的共享服务）

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

2 个答案: