Question

我有这个有助于获取数据的类：

export class ItemsClass {
    name: string;
    desc: string;
    constructor(public name1:string, public desc1:string){
      this.name = name1;
      this.desc = desc1;
    }
}

我有这个组件使用该类生成数据并在div中显示：

import { Component, EventEmitter, Output } from '@angular/core';
import { ItemsClass } from './items-class';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  list:ItemsClass = new ItemsClass('Product 1', 'Electronics', 'SoldOut');
  @Output() EmitData = new EventEmitter<ItemsClass>();

  onSelected(list:ItemsClass){

    this.EmitData.emit(list);

  }
}

这里是可点击的div：

<div class="col-md-4">
    <a class="btn btn-success">New Recipe</a>
</div>
<a href="#" class="list-group-item clearfix">
<hr>
  <div class="col-md-4">
    <ul class="list-group">
    {{list.name}}
    </ul> 
    {{list.desc}}
  </div>
</a>
<app-items (click)="onSelected(list)" [list]="list"></app-items>

现在另一个组件（items.component）就在这里：app-items：当我点击上面的div时，它显示相同的数据（现在）：

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-items',
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css']
})
export class ItemsComponent implements OnInit {
  @Input() list;

  constructor() { }

  ngOnInit() {
  }
}

这是它的html脚本：

<div class="row">
  <div class="col-xs-12">
    <img alt="" class="img-responsive">
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <h1>{{list.name}}</h1>
  </div>
  <div class="col-xs-12">
    <button class="btn btn-success">To Shopping List</button>
    <button class="btn btn-primary">Edit</button>
    <button class="btn btn-danger">Delete</button>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12">
    <p>{{list.desc}}</p>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    Ingredients
  </div>
</div>

问题是当我加载页面时自动触发事件（单击），甚至没有单击div，并且控制台没有错误。我是Angular 2的新手。

Answer 1

您的问题在于使用输出。在这种情况下的输出是如果你想从子节点发送数据到父节点，但是你在这里有一个父子对子的通信，所以在子组件中输入就足够了。更多关于这一点（和其他组件的互动）Here.

代码的简化版本：

父视图：

<ul (click)="onSelected(list)">
   {{list.name}}
</ul> 

<!-- Here we show child only if there is a chosen list and pass that chosen list -->
<app-items *ngIf="chosenList" [chosenList]="chosenList"></app-items>

父组件：

// let's create a variable, that we will use as the list we are "sending" to child
chosenList;

list:ItemsClass = new ItemsClass('Product 1', 'Electronics', 'SoldOut');

onSelected(list:ItemsClass){
   this.chosenList = list; // set the selected list
}

和子视图：

<div>
  <p>{{chosenList.name1}}</p>
</div>

组件：

@Input() chosenList;

工作plunker

编辑：由于您无法使用*ngIf，您可以使用主题。

在你的孩子中宣布一个主题：

public static changesMade: Subject<any> = new Subject();

并在您的子构造函数中，以下内容订阅父项中所做的更改。

constructor() { 
  ChildComponent.changesMade.subscribe(res => {
    this.chosenList = res;
  });
}

并在您执行选择的父级中，将此选定值发送给子级：

onSelected(list:ItemsClass){
  console.log(list.name)
  this.chosenList = list;
  ChildComponent.changesMade.next(this.chosenList);
}

叉形弹药：here

如果您需要在组件之间进行更多通信，我建议您继续使用共享服务。一个答案here

Angular 2可点击事件在没有单击的情况下自动触发

1 个答案:

工作plunker

叉形弹药：here