Angular 2可点击事件会自动触发，甚至无需点击

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);
}

分叉的 plunker：here

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