封面

angular2学习笔记之小技巧

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

前言

1. 组件

 @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封装在模型中

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);
}

使用排序

<div class="ui grid posts">
<reddit-article
*ngFor="let article of sortedArticles()"
[article]="article">
</reddit-article>
</div

3.模板

<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. 服务

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. 管道

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

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

一、 防止页面刷新

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

voteUp(): boolean {
this.article.votes += 1;
return false;
}

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

二、 不让ng进行解析

ngNonBindable

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

<div>
<span class="bordered">{{ content }}</span>
<span class="pre" ngNonBindable>
&larr; This is what {{ content }} rendered
</span>
</div>

三、 预处理

在没有编译之前进行处理

@Component({
selector: 'hello',
host: {
class: 'row'
}

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

四. 组件传参

1. 组件

@Component({
selector: 'reddit-article',
inputs: ['article'],
})
class ArticleComponent {
article: Article;

2. 使用

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

我们可以在Component中得到

五. 输出(自定义事件)

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

@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}来替换参数

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

七、双向绑定

1. 模型到视图

[] 例如 [style.color]

2. 视图到模型

() 例如 (click)

3. 双向绑定

[()] 例如 [(ngModel)]

文章目录
  1. 1. 前言
    1. 1.1. 1. 组件
    2. 1.2. 2. 模型
    3. 1.3. 3.模板
    4. 1.4. 4. 服务
    5. 1.5. 5. 管道
  2. 2. 一、 防止页面刷新
  3. 3. 二、 不让ng进行解析
  4. 4. 三、 预处理
  5. 5. 四. 组件传参
    1. 5.1. 1. 组件
    2. 5.2. 2. 使用
  6. 6. 五. 输出(自定义事件)
  7. 7. 六、 打印日志
  8. 8. 七、双向绑定
    1. 8.1. 1. 模型到视图
    2. 8.2. 2. 视图到模型
    3. 8.3. 3. 双向绑定


twitter分享


如果想及时收到回复,可在 订阅中心Participating中勾选Email

Fork me on GitHub