angular学习总结三——组件的编写

基本的使用组件

注意：必须在module的declarations中声明
目录结构：

zengwe@zengwe-PC:test1$ tree -I '*node_modules*|*e2e*'
.
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── community
│   │   │   ├── community.component.css
│   │   │   ├── community.component.html
│   │   │   ├── community.component.spec.ts
│   │   │   └── community.component.ts
│   │   ├── content
│   │   │   ├── content.component.css
│   │   │   ├── content.component.html
│   │   │   ├── content.component.spec.ts
│   │   │   └── content.component.ts
│   │   ├── content-parts
│   │   │   ├── content-parts.component.css
│   │   │   ├── content-parts.component.html
│   │   │   ├── content-parts.component.spec.ts
│   │   │   └── content-parts.component.ts
│   │   ├── item
│   │   │   ├── item.component.css
│   │   │   ├── item.component.html
│   │   │   ├── item.component.spec.ts
│   │   │   └── item.component.ts
│   │   └── value
│   │       ├── value.component.css
│   │       ├── value.component.html
│   │       ├── value.component.spec.ts
│   │       └── value.component.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

组件的基本应用

需要被引入的组件./item/item.component
该组件的html如下

<p>
  item works!
</p>

使用这个组件

   <div class="demo1">
       <p>app-item这个标签的名字是./item/item.component.ts中
           装饰器@component selector:value中的value
       </p>
       <p>这个是什么也不传</p>
       <app-item></app-item>            
   </div>   

父组件向子组件传值

需要被引入的组件./value/value.component

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-value',
    templateUrl: './value.component.html',
    styleUrls: ['./value.component.css']
})
export class ValueComponent implements OnInit, AfterViewInit {
    @Input('value') value: string;//接收'value'是html中的[value],第二个value为变量名，随意取
    constructor() {
        console.log('component value constructor');
        console.log(this.value);
    }

    ngOnInit() {
    }
    ngAfterViewInit() {
        console.log('component value ngAfterViewInit');
        console.log(this.value);
    }
}

传值./app.component.html

        <div class="demo2">
            <p>传值,父组件的值为：{{value1}}</p>
            <app-value value="{{value1}}"></app-value><br>
            <p>然后在value.component中@Input获取到这个值，但是这个值在组件渲染初始化后才有值，之前都是undefind</p>
            <p>第二种传值。父组件的值为：{{value1}}</p>
            <app-value [value]="value1"></app-value><br>
            <p>第二种传值。父组件的值为：{{value1}}</p>
            <input type="text" [(ngModel)]="value1">
            <app-value [(value)]="value1"></app-value><br>
            <p>ps:子组件内部修改值并不能影响到父组件，而父组件的值修改却修改了子组件的值,说明数据流其实是至上而下的</p>
        </div>

父组件获取子组件的实例@ViewChild（就是子组件的component对象）

没写@ViewChildren的原因是这个和@ViewChild唯一区别可能就是一个获取到的是单个一个获取到的数组，@ViewChild中如果有多个相同，则只获取第一个
app.component.html

       <div class="demo3">
            <p>父组件获取子组件，#target为钩子，用于找到组件</p>
            <app-item #target></app-item>  
        </div>

app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ItemComponent } from './item/item.component';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    value1= 'zengwe';
    @ViewChild('target') target: ItemComponent;
    ngAfterViewInit() {
        //必须在页面组件初始化完成后才能得到这个值
        console.log(this.target);
    }
}

子组件与父组件通信@Input&@Output

app.component.html

 <div class="demo4">
     <p>子组件与父组件通信</p>
     <p>communityEvent使用()包起来的是自定义的事件，子组件通过处罚这个事件，从而触发父组件的
         callParent($event)，$event这个只能这么写，callParent这个方法才能得到值
     </p>
     <app-community (communityEvent)="callParent($event)"></app-community> 
 </div>

community.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-community',
    templateUrl: './community.component.html',
    styleUrls: ['./community.component.css']
})
export class CommunityComponent implements OnInit {
    @Output('communityEvent') communityEvent: EventEmitter<any> = new EventEmitter();
    constructor() { }

    ngOnInit() {
    }
    emiteParentEvent() {
        //在html使用这个组件时(communityEvent),这个括号就是绑定事件的意思
        //[]表示绑定属性
        //[()]表示双向绑定
        this.communityEvent.emit('call parent');
    }
}

app.component.ts

import { Component} from '@angular/core';
import { ItemComponent } from './item/item.component';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    callParent(val) {
        console.log('child is call me!');
        console.log(val);
    }
}

组件嵌套

ps：以前学reactjs时看了许多，许多人写文档都是说，组件复用，但是却没写嵌套，没嵌套复用个毛线啊。所以这个相当重要

app.component.html

 <div class="demo5">
     <p>嵌套</p>
     <div>
         <app-content>
             <app-item #target></app-item>  
         </app-content>
     </div>
     <p>获取多个分别嵌套进去</p>
     <div>
          <app-content-parts>
             <div class="parta"><span>this is part1</span></div>
             <div class="partb">this is part2</div>
             <div class="not-content">can't content</div>
         </app-content-parts> 
     </div>
 </div>

content.component.html

<div>
  <p>ng-content show</p>
  <ng-content></ng-content>
</div>

content-parts.component.html

<div>
  content-parts works!
  <ng-content select='.parta'></ng-content>
  <div>
    <p>this is partb content</p>
    <ng-content select='.partb'></ng-content>
  </div>
</div>

如果是自己封装通用的组件，且依赖大于一个最好用一个module来引入，并且在module中exports最外层这些component
用到这个组件时直接imports这module，爽歪歪！