Question

我有一个两个兄弟组件，比如app-event和app-object在一个根组件中，我有app-object组件中的对象数组，现在我想在app-event兄弟组件中传递该对象数组，如何我能用非常简单的方式在angualr2 / 4中做到这一点吗？

 <div class="jumbotron">
     <div class="container">
    <div class="col-sm-8 col-sm-offset-2">
        <app-object></app-object>
        <app-event></app-event>
      </div>
  </div>

这是我的模型文件

export class dataObject{

  constructor(public item:string, public amount : number, public available:boolean){
     }
  }

这是app-object组件ts文件

    import { Component, OnInit } from '@angular/core';
    import { dataObject} from './app-object.model'

    @Component({
     selector: 'app-object',
     templateUrl: './app-object.component.html',
     styleUrls: ['./app-object.component.css']
   })

   export class AppObjectComponent implements OnInit {

 data:dataObject[]=[new dataObject('itemA',45,true), new dataObject('itemB',58,false)];

  constructor() {
  console.log(this.data);
 }

 ngOnInit() {
 }

 }

现在app-event组件ts文件代码我想拥有app-object文件的数据（对象的数据变量数组）

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

 @Component({
 selector: 'app-event',
 templateUrl: './app-event.component.html',
 styleUrls: ['./app-event.component.css']
})

  export class AppEventComponent implements OnInit {

  // here inside this class i want to have data of app-object component....

     constructor() { }

    ngOnInit() {
  }

 }

Answer 1

AppEventComponent

@Input() data:dataObject[];需要

{{1}}

让这个工作。

Answer 2

使用@ViewChild来实现此目标

<div class="jumbotron">
     <div class="container">
    <div class="col-sm-8 col-sm-offset-2">
        <app-object></app-object>
        <app-event></app-event>
      </div>
  </div>

创建两个ViewChild() objects，如下所示

@ViewChild(AppObjectComponent) appObjectComponent : AppObjectComponent;
@ViewChild(AppEventComponent) appEventComponent : AppEventComponent;

将变量声明为public，以便可以从此处访问。

在AppObjectComponent

中

arrayVariable:any[];

在AppEventComponent中

array2:any[]

父组件中的方法将为

someEvent(){
    this.appObjectComponent.arrayVariable = this.appEventComponent.array2 ;
}

两个兄弟组件之间的通信，而不使用angular2 / 4中的服务

2 个答案: