angular2学习笔记之小技巧

在angular2的开发中经常会遇到各种各样的问题,我们可以采用一些小技巧来解决这些问题。angular2-demo

前言

1. 组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
   @Component({
   selector: 'reddit-article',
   inputs: ['article'],
   template:require('reddit-article.html');
   })

  class ArticleComponent {
   article: Article;

   voteUp(): boolean {
   this.article.voteUp();
   return false;
   }

   voteDown(): boolean {
   this.article.voteDown();
   return false;
   }

2. 模型

类似javabean,可以把api封装在模型中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
  class Article {
   title: string;
   link: string;
   votes: number;

  constructor(title: string, link: string, votes?: number) {
   this.title = title;
   this.link = link;
   this.votes = votes || 0;
   }

   voteUp(): void {
   this.votes += 1;
   }

   voteDown(): void {
   this.votes -= 1;
   }

   sortedArticles(): Article[] {
    return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);
    }

使用排序

1
2
3
4
5
6
<div class="ui grid posts">
 <reddit-article
 *ngFor="let article of sortedArticles()"
 [article]="article">
 </reddit-article>
 </div

3.模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  <div class="four wide column center aligned votes">
   <div class="ui statistic">
   <div class="value">
   {{ article.votes }}
   </div>
  writing your First Angular 2 Web Application
   <div class="label">
   Points
   </div>
   </div>
   </div>
   <div class="twelve wide column">
   <a class="ui large header" href="{{ article.link }}">
   {{ article.title }}
   </a>

   <ul class="ui big horizontal list voters">
   <li class="item">
   <a href (click)="voteUp()">
   <i class="arrow up icon"></i>
   upvote
   </a>
  </li>
   <li class="item">
   <a href (click)="voteDown()">
   <i class="arrow down icon"></i>
   downvote
   </a>
   </li>
   </ul>
   </div>

4. 服务

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import {Injectable} from '@angular/core';
import { Http }from '@angular/http';
import * as api from './../api/Api';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class UserService {
    constructor(public http:Http) {
        this.http = http;
    }

    findAll():Observable<any> {
        return this.http.get(api.findAll).map((res:any)=> {
            return res.json();
        });
    }
}

5. 管道

1
2
3
4
5
6
7
8
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'trim' })
export class TrimPipe implements PipeTransform {
  transform(value, args) {
    return value.trim();
  }
}

一、 防止页面刷新

如果想阻止页面刷新,在方法的返回值为false。

1
2
3
4
5
6
7
8
9
  voteUp(): boolean {
    this.article.votes += 1;
    return false;
  }

  voteDown(): boolean {
    this.article.votes -= 1;
    return false;
  }

二、 不让ng进行解析

ngNonBindable

告诉angular 在这个页面上我们不绑定或者不编译的特殊部分。比如我们要展示代码源码的时候不希望它进行编译

1
2
3
4
5
6
	<div>
	 <span class="bordered">{{ content }}</span>
	 <span class="pre" ngNonBindable>
	 &larr; This is what {{ content }} rendered
	 </span>
	</div>

三、 预处理

在没有编译之前进行处理

1
2
3
4
5
	@Component({
   selector: 'hello',
  host: {
	 class: 'row'
	 }

具体表现为 <hello class="row">

四. 组件传参

1. 组件

1
2
3
4
5
6
@Component({
 selector: 'reddit-article',
 inputs: ['article'],
 })
 class ArticleComponent {
 article: Article;

2. 使用

1
 <reddit-article [article]="article1"></reddit-article>

我们可以在Component中得到

五. 输出(自定义事件)

在class中 定义一个 @Output(EventEmitter)然后在构造函数中实例化 在class中 定义一个 @Intput 输入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
	@Component({
	 selector: 'single-component',
   inputs:['titles']
	 outputs: ['putRingOnIt'],
	 template: `
	 <button (click)="liked()">Like it?</button>
	 `
	 })
	 // 自定义一个事件
	 class SingleComponent {
	 putRingOnIt: EventEmitter<string>;

	 constructor() {
	 this.putRingOnIt = new EventEmitter();
	 }

	 liked(): void {
	 this.putRingOnIt.emit("oh oh oh");
	 }
	 }

[] 输入 inputs 参数 () 输出 outputs 事件

六、 打印日志

可以使用 ${value}来替换参数

1
2
3
4
addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
 console.log(`Adding article title: ${title.value} and link: ${link.value}`\
 );
  }

七、双向绑定

1. 模型到视图

[] 例如 [style.color]

2. 视图到模型

() 例如 (click)

3. 双向绑定

[()] 例如 [(ngModel)]

署名 - 非商业性使用 - 禁止演绎 4.0