angular组件交互

1.父组件通过属性绑定的方式将数组从上到下的流入到子组件中，子组件需要通过@Input装饰器来获取。

例如：

父组件为
@Component({
      template: `
          <ul class="list">
                 <li *ngFor="let contact of contacts">
                        <app-list-item [contact]="contact"></app-list-item>
                 </li>
          </ul>
`
})
export class ListComponent implement OnInit{
          this.contacts = data;
}

子组件为：
@Component({
        template:`
             <div class="contact-info">
                  <label class="contact-name">{{contact.name}}</label>
                  <label class="contact-tel">{{contact.telNum}}</label>
            </div>        
`
})
export class ListItemComponent implements OnInit{
      @Input() contact: any = {};
}

2.子组件通过事件传递的方式向父组件传递数据，子组件需要实例化EventEmitter类，并使用装饰器@Output修饰这个输出属性。父组件通过事件绑定的方式来订阅来自子组件触发的事件。

父组件：
@Component({
        template: `
            <contact-collect [contact]="detail" (onCollect)="collectTheContact($event)"></contact-collect>
        `
})
export class CollectionComponent implements OnInit{
        detail: any = {};
        collectTheContact(){
              this.detail.collection == 0 ？ this.detail.collection = 1 : this.detail.collection = 0;  
      }
}
父组件通过绑定自定义事件onCollect订阅来自子组件触发的事件。

子组件
@Component({
      template: `<i  (click)=collectionTheContact()>收藏</i>`
})
export class ContactCollectComponent{
      @Input() contact: any = {};
      @Output() onCollect = new EventEmitter<bollean>();
      collectTheContact(){
          this.onCollect.emit();
      }
}

通过@Output将数据流向父组件。

3.父组件通过局部变量获取子组件的引用、父组件使用@ViewChild获取子组件的引用

（1）在父组件的模板中为子组件创建一个局部变量，父组件可以通过这个局部变量来获取读取子组件公共成员变量和方法的权限。模板变量只能在模板中使用，不能再父组件类中使用
例如

父组件：
@Component({
      template:`
            <contact-collect (click)="collect.collectTheContact()" #collect></contact-collect>
      `
})
export class CollectionComponent{}
在父组件中为子组件创建了一个局部变量collect,父组件就可以使用collect调用子组件的方法collectTheContact()

子组件
@Component({
        template:<i>收藏</i>
})
export class ContactCollectComponent{
      detail: any = {};
      collectTheContact(){
          this.detail.collection == 0 ? this.detail.collection = 1 : this.detail.collection = 0;
      }
}

(2)使用@ViewChid获取子组件的引用，该方法获取的引用可以再父组件类中使用。
@ViewChild()提供了一个参数来选择将要引用的组件元素。这个参数可以是一个类的实例，也可以是字符串。
I.参数为类实例，表示父组件将绑定一个指令或者子组件实例
II.参数为字符串类型，相当于在父组件中绑定一个模板局部变量，获取到子组件的一个实例对象的引用。

参数为字符串
@ViewChild("dateRange")
private dateRange: OpsDateRangeComponent;
<ops-date-range #dateRange style="line-height: 29px"
                            (changeDateEvent)="dateListener($event)"></ops-date-range>

参数为类实例
@Component({
      template:`
            <contact-collect (click)="collectTheContact()"></contact-collect>
`
})
export class CollectionComponent{
      @ViewChild(ContactCollectComponent) contactCollect: ContactCollectComponent;
      ngAfterViewInit(){}
      collectTheContact(){
            this.contactCollect.collectTheContact();
      }
}

组件内容嵌入

<ng-content>标签用来渲染组件嵌入内容。
例如：

@Component({
    selector: 'example-content'
    template: `
        <div>
            <h4>ng-content实例</h4>
            <div style="background-color: gray">
                <ng-content select="header"></ng-content>
            </div>
       </div>
`
})
class NgContentExampleComponent{}
<ng-content>中有一个select="header"，用于匹配内容。并填充到ng-content中。

使用
@Component({
      selector:'app'
      template:`
          <example-content>
                <header>Header content</header>
          </exampe-content>
`
})
export class NgContentAppComponent{}

最后渲染成的是
<app>
    <example-content>
        <div>
            <h4>ng-content</h4>
            <div style="background-color: gray">
                <header>Header content</header>
            </div>
        </div>
       </example-content>
</app>
从图中可以看出<header>Header content</header>被填充到了ng-content，select属性是一个选择器，类似于css的选择器，可以有标签选择器、类选择器、属性选择器。