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.

代码的简化版本:

父 View :

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

和 subview :

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

组件:

@Input() chosenList;

工作plunker

编辑:由于您不能使用 *ngIf，您可以使用 Subjects。

在您的 child 中声明一个主题:

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

fork 插件:here

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