angular6入门笔记

1.0创建项目

  ng new  my-app   // 建立项目目录
  ng serve --open  //  启动项目
  ng g c product        // 创建组件

1.1 ngFor循环和事件

  <ul>
      <li *ngFor="let item for aryList;let i = index" 
            (click)="onClick($event)">
            {{i}}-----{{item.name}}
      </li>
  </ul>


 export class ProductComponent implements OnInit {
    constructor() { }
    onClick(event) {
        console.log(event)
     }

    ngOnInit() {
    }

 }

1.2获取dom元素

    <div id="div">一个元素标签</div>

import { Component, ElementRef, ViewChild } from '@angular/core';
export class ProductComponent implements OnInit {
    constructor(
      private el:ElementRef
    ) { }
    onClick(event) {
        console.log(event)
     }

    ngOnInit() {
      this.el.nativeElement.querySelector('#div').style.width = '200px';
    }
}

1.3 ngIf

  <div *ngIf="isShow">我是一个div</div>


  export class ProductComponent implements OnInit {
     constructor() { }
  
    isShow: boolean=false;
    ngOnInit() {
      this.el.nativeElement.querySelector('#div').style.width = '200px';
    }

 }

1.4父组件给子组件传递数据
1.4.1 父组件

  <div class="box">
     <h3>ant h3</h3>
     <app-box [num]=100></app-box>
  </div>

1.4.2子组件

  <div class="box-children">
    <h4>ant \(^o^)/~</h4>
    <h4>{{num}}</h4>
  </div>


  @Component({
     selector: 'box-children',
     templateUrl: './box-children.component.html',
     styleUrls: ['./box-children.component.css']
  })
  export class BoxChildrenComponent implements OnInit {
    @Input() num: Number;  // 用于接受父组件的数据源,要和父组件保持一致是Number类型
     constructor() { }

    ngOnInit() {
     }

  }

1.5 行内样式

  <div class="box">
      <div [ngStyle]="getStyle()">style样式</div>
  </div>

export class BoxComponent implements OnInit {
  constructor() { }

  getStyle() {
    return {
      'background': '#ccc',
      'font-size': '20px',
      'color': '#fff'
    }
  }
  ngOnInit() {
  }
}

1.6 双向数据绑定model

    <div class="box-children">
      <h4>ant \(^o^)/~</h4>
      <input type="text" [(ngModel)]="name">
    </div>

export class BoxComponent implements OnInit {
  constructor() { }
  name: string='李明'
  ngOnInit() {
  }
}

1.7关于类

  <div class="box">
      <h4 [ngClass]="{box-title: sty.hasTitle}">\(^o^)/~</h4>
  </div>

1.8 ViewChild实现调用子组件方法

  <div class="box">
        <div (click)="onClick()">\(^o^)/</div>
  </div>


  import { Component, OnInit, ViewChild } from '@angular/core';
  import { BoxChildrenComponent } from '../box-children.component'

  @Component({
      selector: 'app-box',
      templateUrl: './box.component.html',
      styleUrls: ['./box.component.css']
    })
  export class BoxComponent implements OnInit {

    @ViewChild( BoxChildrenComponent) boxChildrenFn: BoxChildrenComponent;
    constructor() { }
    onClickClick() {
      this.boxChildrenFn.testClick()
    }

    ngOnInit() {
    }

  }

子组件

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

@Component({
  selector: 'box-children',
  templateUrl: './box-children.component.html',
  styleUrls: ['./box-children.component.css']
})
export class BoxChildrenComponent implements OnInit {
  constructor() { }

  testClick() {
    console.log('我是box-chilren')
  }

  ngOnInit() {
  }

}

1.9组件内容的嵌套
父组件

  <div class="box">
      <h3>\(^o^)/~</h3>
  
  <box-children select="[name=middle]">
    <div class="middle">
      <h4>嵌入内容到子组件, 此h4会嵌入到子组件中</h4>
    </div>
    <div class="bottom">
      <h4>嵌入内容到子组件, 此内容不会到子组件中, 不会显示在页面中</h4>
    </div>
    <div name="top">
      <h5>嵌入内容到子组件, 此h5会嵌入到子组件中</h5>
    </div>
  </box-chidren>
</div>

子组件

  <div class="box-children">
    <ng-content select="[name=top]"></ng-content>
    <ng-content select=".middle"></ng-content>
</div>

2.0关于input的事件

<input type="number" name="num" [value]="person.num"  (input)="change($event)" />

person: Object = {
  num: 1
}
change(e) :void {
  this.person.num = e.target.value
}

2.1使用FormsModule

  import { FormsModule } from @angular/forms;
// 所有模块中都能使用
@NgModule({
  FormsModule
})

2.2内置管道

  <div class="pip">
      <span>{{this.mydate | date: "yyyy-mm-dd hh:mm:ss"}}</span>
      <button (click)="getNowTime()">获取当前时间</button>
 </div>

export class MainComponent implements OnInit {
   constructor() {}
   mydate: Object

   getNowTime() {
      this.mydate= new Date()
   }
}

2.3自定义管道
首先创建一个管道

ng generate pipe nameLevel

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'nameLevel'
})
export class NameLevelPipe implements PipeTransform {
  
  transform(value: Number): String {
    if (value >= 90) {
      return '特级';
    } else if (value >= 80 && value < 90) {
      return '高级';
    } else if (value >= 70 && value < 80) {
      return '一般';
    } else if (value < 70) {
      return '很一般';
    }
  }
}

使用管道

  <div class="diy-pip">
      <div>{{myScores | nameLevel}}</div>
      <input type="number" [(ngModel)]="myScores" >
  </div>

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

@Component({
   selector: 'app-main',
   templateUrl: './main.component.html'
})
export class MainComponent implements OnInit {
  constructor() {}
  myScores: Number = 88
}

2.4 父组件和子组件公用一个服务的

// 公共的服务 commonService
import { Injectable } from '@angular/core';
export class CommonService {
  products: object[] = []
  addProducts(info: Object): void {
    this.products.push(info)
  }
  clearProducts(): void {
    this.products = []
  }
}

父组件

  <div class="add-product">
  <input type="text" [(ngModel)]="product.title" placeholder="名称">
  <input type="text" [(ngModel)]="product.des" placeholder="详情">
  <input type="text" [(ngModel)]="product.price" placeholder="价格">
  <input type="text" [(ngModel)]="product.addr" placeholder="产地">
  <button (click)="addProducts()">addProducts</button>
</div>
<app-main></app-main>

import { Component } from '@angular/core';
import { CommonService } from './commonService'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [CommonService]
})
export class AppComponent {

  product: Object = { title: '', des: '', price: '', addr: '' };
  constructor( private _CommonService: CommonService) {}
  addProducts(): void {
    this._CommonService.addProducts(this.product)
  }
}

子组件

<div class="common-service">
  <button (click)="getProductList()">获取商品列表</button>
  <li *ngFor="let item of productList">
    <span>{{item.title}}</span> -
    <span>{{item.des}}</span> -
    <span>{{item.price}}</span> -
    <span>{{item.addr}}</span>
  </li>
</div>

import { Component, OnInit, Input} from '@angular/core';
import { CommonService } from '../commonService'

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
})
export class MainComponent implements OnInit {

  productList: Array<object>
  constructor( private _CommonService: CommonService) { }
  getProductList(): void {
    this.productList = this._CommonService.products
  }
}

2.5关于服务器的通信

npm install --save rxjs  rxjs-compat
ng generate service ajax

// 在组件引入并注入
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    HttpModule
  ],
})

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';

const url_getStudents: string = 'https://127.0.0.1:4000/app'
   
@Injectable({
   providedIn: 'root'
})
export class AjaxService {
  constructor( private _http: Http ) { }
  getPruductList(): Observable<any[]> {
    return this._http.get(url_getStudents)
              .map(((res) => {
                console.log('res.json()', res.json())
                return res.json()
              }))
  }
}

<div class="http">
  <button (click)="getPruductList()">get</button>
</div>

import { Component, OnInit, Input, EventEmitter } from '@angular/core';
import { CommonService } from '../commonService'
import { AjaxService } from '../ajax.service'

@Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  constructor( 
    private _AjaxService: AjaxService
  ) { }

  getPruductList(): void {
    this._AjaxService.getPruductList().subscribe(contacts => {
      console.log('contactss', contacts)
    }, err => {
      console.log('err', err)
    })
  }
}

2.6生命周期
父组件

  <div class="box">
      <h2>box</h2>
      <button (click)="addBoxNum()">改变num</button>
      <app-box-child [num]="boxNum"></app-box-child>
  </div>

import { Component, OnInit, ViewChild } from '@angular/core';
import { BoxChildrenComponent } from '../box-children.component'

@Component({
   selector: 'app-box',
   templateUrl: './box.component.html',
   styleUrls: ['./box.component.css']
})
export class BoxComponent implements OnInit {
  @ViewChild(BoxChildrenComponent) boxChildrenFn: BoxChildrenComponent;
   constructor() { }

   addBoxNum(): void {
     this.boxNum += 1
   }

  boxNum: Number = 12
  ngOnInit() {
  }

}

子组件

  <div class="box-child">
      <h4>父组件传过来的num: {{num}}</h4>
  </div>

 import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'box-children',
  templateUrl: './box-children.component.html',
})
export class BoxChildrenComponent implements OnInit {

  @Input() num: Number;

  ngOnChanges(data): void {
    console.log('父元素传过来的值改变了啊', data)
  }
  constructor() { }
  ngOnInit() {
  }
}

2.7 关于ngOnInit
该方法(钩子)内可用于获取数据, 有点类似于vue的created

2.8路由

import { Routes } from '@angular/router'
import { ListComponent } from './list/list.component'
export const rootRouterConfig: Routes = [
  {path: 'list', component: ListComponent}
]

import { rootRouterConfig } from './app.routes'
import { NgModule, ModuleWithProviders } from '@angular/core'
import { RouterModule } from '@angular/router'

let rootRouteModule:ModuleWithProviders = RouterModule.forRoot(rootRouterConfig)

@NgModule({
  imports: [
    rootRouteModule
  ]
})

export class AppModule { }

<div class="route">
    <h3>route</h3>
    <a [routerLink]="['/list']">goto-list</a>
    <router-outlet></router-outlet>
</div>

2.9关于路由的routerLinkActive

<div routerLinkActive="active">
  <a [routerLink]="['/list']">goto-list</a>
</div>
<div routerLinkActive="atv">
  <a [routerLink]="['/detail']">goto-detail</a>
</div>

.active {
  background: #ccc;
}

3.0关于路由的跳转

// 默认路由的跳转
import { Router } from '@angular/router'

export class AppComponent {
  constructor( 
    private router: Router
  ) {
    router.navigate('/list')
  }

}

  <div class="div" (click)="goList()">路由跳转</div>

import { Router } from '@angular/router'
export class AppComponent {

  constructor( 
    private router: Router
  ) {}

  goList(){
   // js带参数的路由的跳转
   this.router.navigate(['/list'], {queryParams: {num: 10}}) 
  }
}

// 实现路由带参数
// 页面
<a [routerLink]="['/list']" [queryParams] = "{num: 10}">走一个</a>

// js
this.router.navigate(['/list'], {queryParams: {num: 10}})或
this.router.navigateByUrl('/list?num=10')

3.1获取路由的参数

<div routerLinkActive="active">
  <a [routerLink]="['/detail']" 
       [queryParams] = "{num: 10, from: 'shanghai', add: '中央大街'}">
      跳转
  </a>
</div>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  constructor(
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      console.log(params)  // {num: "10", from: "shanghai", add: "中央大街"}
    })
  }
}

3.2子路由

import { Routes } from '@angular/router'
import { DetailComponent } from './detail/detail.component'
import { InfoComponent } from './info/info.component'

export const rootRouterConfig: Routes = [
  {path: 'detail', component: DetailComponent, children: [
    // path为空表示默认显示的路由
    // {path: '', component: Info2Component}
    {path: 'info', component: InfoComponent}
  ]}
]

  <div class="detail">
      <h3>detail-component</h3>
      <a [routerLink]="['/detail/info']" [queryParams] = "{name: 'liming'}">点击详情</a>
      <router-outlet></router-outlet>
 </div>

3.3附属路由
同一个页面只能有一个router-outlet , 可以有多个附属路由

import { Routes } from '@angular/router'
import { DetailComponent } from './detail/detail.component'
import { InfoComponent } from './info/info.component'

export const rootRouterConfig: Routes = [
  {path: 'detail', component: DetailComponent, children: [
    {path: 'info', component: InfoComponent},
    {path: 'add', component: AddComponent, outlet='card'},
    {path: 'age', component: AgeComponent, outlet='card'}
  ]}
]

<div class="detail">
  <h3>detail-component</h3>
  <a [routerLink]="['/detail/info']" [queryParams] = "{name: 'tom'}">点击详情</a>
  <router-outlet></router-outlet>
  <router-outlet name="card"></router-outlet>
</div>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,723评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,080评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,604评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,440评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,431评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,499评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,893评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,541评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,751评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,320评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,890评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2赞 342

推荐阅读更多精彩内容

  • Angular 源码翻译之core package
    core package 概要：Core是所有其他包的基础包.它提供了大部分功能包括metadata，templa...
    LOVE小狼阅读 2,552评论 0赞 3
  • Angular单页面开发
    一、安装最新版本的 nodejs 注意：请先在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验...
    liuguangsen阅读 2,068评论 0赞 1
  • Angular 入门
    Angular介绍 Angular安装、创建项目、目录结构、组件、服务 创建组件、绑定数据、绑定属性、数据循环、条...
    地瓜粉丝阅读 504评论 0赞 2
  • 房产证上不加我的名字？那还结什么婚
    01 富书今天的热文《真正有底气的女人，都自己买房》里我们能看到，婚前房产证到底加不加对方的名字，成了现代人婚姻的...
    小玉谈个人品牌阅读 772评论 4赞 14
  • 心赏（82）
    亲爱的曦宝，昨天英语课上你们做了三明治，下课后你捧着缺了一角的三明治给妈妈，说这是自己亲手做的，省给我吃...
    苗苗mm阅读 140评论 0赞 3