Angular2+ 基础

时间：2018-07-23 20:24:27 阅读：190 评论：0 收藏：0 [点我收藏+]

标签：log 部分相关 port route 必须外部 add core

Angular 框架特性

技术分享图片

Angular 核心思想

技术分享图片

各个核心思想之间的关系

技术分享图片

组件（Component）详解

组件（Component）三种常见交互方式

1、父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件

//父组件html代码
<li *ngFor="let item of dataList;let i=index">
  <span>{{item.name}}</span>
  <app-child [names]="item" (foo)="bar($event)"></app-child>
</li>
//父组件ts代码
dataList=[
  {"id":0,"name":"张三"},
  {"id":1,"name":"李四"},
  {"id":2,"name":"王五"}
];
bar(event:any){
  console.log(event);
}
//子组件html代码
<input type="button" value="{{names.name}}" (click)="todo($event)" />
//子组件ts代码
export class ChildComponent implements OnInit{
  @Input() names:any = {}
  @Output() foo = new EventEmitter<string>()
  todo(event:any){
    this.foo.emit(‘hello‘);
  }
}

2、父组件通过@ViewChild获取子组件的引用

//父组件html代码
<p-tree #structureTree [value]="structureTreeNodes"></p-tree>
//父组件ts代码
export class StructureComponent implements OnInit{
  @ViewChild(‘structureTree‘) structureTree:Tree;
  this.structureTree.XXX();
}

3、利用服务的特性-单例性，作为数据交互的中介

import { Injectable } from ‘@angular/core‘;
@Injectable()
export class ChildToFatherService{
    list:string[] = [];
    constructor(){}
    append(str:any){
    this.list.push(str);
    }
}
//父组件的ts代码
import {Component,OnInit} from ‘@angular/core‘;
import { ChildToFatherService } form ‘../../service/child-to-father.service‘;
@Component({
    selector:‘app-father‘,
    templateUrl:‘./father.component.html‘,
    styleUrls:[‘./father.component.css‘],
    providers:[ChildToFatherService]
})
export class FatherComponent implements OnInit{
    list:string[] = [];
    constructor(private service:ChildToFatherService){}
}

//子组件的ts代码
import { Component,OnInit } from ‘@angular/core‘;
import { ChildToFatherService } from ‘../service/child-to-father.service‘;
@Component({
    selector:‘app-child‘,
    templementUrl:‘./child.component.html‘,
    styleUrls:[‘./child.component.css‘]
})
export class ChildComponent implements OnInit{
    inputText:string = ‘‘;
    contructor(private service:ChildToFatherService){}
    ngOnit(){

    }
    add(){
    this.service.append(this.inputText);
    this.inputText = ‘‘;
    }
}

常见的数据绑定方式

技术分享图片

模块（Module）详解

技术分享图片

1、模块是组织应用和使用外部库扩展应用的最佳途径。

2、Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。

3、模块可以把服务加到应用中。这些服务可能是内部开发的，或者来自外部的（比如 Angular 的路由和 HTTP 服务）。

4、模块可以在应用启动时立即加载，也可以由路由器进行异步的惰性加载。

模块（Module）属性说明

技术分享图片

路由（Route）详解

技术分享图片

1、路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。

2、通过控制不同的路由，获取不同的数据，从而渲染不同的页面。

路由（Route）代码示例

@NgModule({
    imports:[
      RouterModule.forRoot([
        {path:‘‘,redirectTo:‘home‘,pathMatch:‘full‘},
        {path:‘login‘,component:LoginComponent},
        {path:‘home‘,component:HomeComponent},
        {path:‘business‘,loadChildren:‘./business/business.module#BusinessModule‘},
        {path:‘**‘,component:PageNotFoundComponent}
      ])
    ],
    exports:[RouterModule]
})

@NgNodule({
    imports:[
      RouterModule.forChild([
        {
          path:‘‘,component:BusinessComponent,
          children:[
          {path:‘‘,redirectTo:‘description‘,pathMatch:‘full‘},
          {path:‘description‘,loadChildren:‘./description/description.module#DescriptionModule‘}
          ]
        }
      ])
    ],
    exports:[RouterModule]
})