ng2-EventEmitter

ng2-EventEmitter

吴阳 No Comment
Angular

demo:

1.组件样式问题

A组件嵌入了B组件,那么被嵌入的结构的样式应写在B组件内。

2.组件通讯

父组件中,对子组件进行事件绑定:
html

<app-loader [url]="'/api/index/index'" [method]="'get'" [body]="body" (onReceive)="receiveTheData($event)"></app-loader>

ts

export class FindComponent implements OnInit {
  receiveTheData(action) {
    // 从loader组件返回action
    // console.log(action);
    this.topCarousel = action.locationAds[0].ads;
    this.list = action.hotProducts;
  }
}

子组件输出
ts

export class LoaderComponent implements OnInit, OnChanges {
data;
@Output() onReceive = new EventEmitter();
  receiveTheData() {
    this.onReceive.emit(this.data);
  }
  ngOnInit(){
   this.ajax(){

   //假如异步返回是res的结果

   this.data = res;
   this.receiveTheData();
   }
 }
}

3.对于angular HTML中,各标签属性的应用。
模板绑定是通过 property 和事件来工作的,而不是 attribute。
在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了。

举个例子:
data = '<p>123</p>'
<div [innerHTML]="data"></div>
输出:
<div>
<p>123</p>
</div>

要发表评论,您必须先登录