Angular 2 clickable事件无需单击即可自动触发
Angular 2 clickable事件无需单击即可自动触发
提问于 2017-01-23 21:18:03
我有一个帮助获取数据的类：
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>问题是，当我加载页面时，事件(click)被自动触发，甚至没有单击div，并且控制台没有错误。我是Angular 2的新手。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-23 23:08:33
您的问题在于使用输出。本例中的输出是如果您希望从子组件向父组件发送数据，但这里是父到子通信，因此在子组件中输入就足够了。有关该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();在您的子构造函数中，订阅了在parent中所做的更改。
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41807343
复制相关文章
相似问题
腾讯云开发者
