Question

我构建了一个Angular 2组件，我有一个疑问：是否有一个标准可以定义是否应该广播组件内部触发的事件（例如，如果是@Output），或者组件是否可以自己处理它们？

让我展示一些代码：

该组件可称为 content-detail ，模板为：

<ion-card (click)="navigate()">
    <h3>{{ rawcontent.name }}</h3>
</ion-card>

<。> .ts有一个navigate（）方法，在里面我调用了一些路径（在我的情况下，它是一个Ionic 2应用程序，它使用NavController，但它可能是其他任何东西）。

@Component({
  selector: 'content-detail',
  templateUrl: 'content-detail.html'
})
export class ContentDataComponent {
  navigate() {
   //do seomething, like navigate to another page
  }
}

这是一个好习惯吗？或者最好的是组件使用EventEmitter将其发送给它的父级（例如，如here所述）我找不到任何关于它的文档。我猜想如果它只是将事件发送给父节点而不是导航（或做任何其他事情），那么测试组件会很容易，因为我不需要注入一些路由器或navcontroller。有人可以帮忙吗？

Answer 1

(someEvent)="someMethod()"是处理模板中事件的常用方法
@Output() xxx;用于从孩子到父母的沟通
适用于所有其他方案使用共享服务
用于兄弟姐妹之间的通信，有一个使用模板变量的快捷方式

<my-a-comp #a></my-a-comp>
<my-b-comp (someEvent)="a.someMethod()"

另见https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

您可以使用以下主机监听器：

@Component({
selector: 'content-detail',
templateUrl: 'content-detail.html'
})
export class ContentDataComponent {
  @HostListener('click') onClick() {
    // do navigation ...
  }
}

Angular 2：可以自定义组件处理自己的事件吗？

2 个答案: