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，爽歪歪！