angular2学习笔记之基本组件和ngFor

http://www.tuicool.com/articles/eMnQfmQ

时间 2016-06-30 16:55:35  好JSER

原文  http://hao.jser.com/archive/10992/

主题 AngularJS

angular2的思想非常先进，摒弃了angular1那种复杂的构建模式，采用了组件化开方的方，那我们一起来看一看，一个基础的组件是什么样子的呢。 angular2-demo

一、简介

1. 目录结构

• .ts 组件代码

• .scss 样式

• .png 效果图

• .html 模板文件

2. 效果图

二、代码实例

https://github.com/qq83387856/angular2-demo/tree/master/src/ts/component/basic

三、 详细解读

1. Basic.ts

一个基本的组件就长个样子，并没有那么神秘

import {Component} from '@angular/core';
import {UserModel} from './../../model/UserModel';

// 创建模拟数据
let xiaomo:UserModel = new UserModel( 'xiaomo');
let xiaoming:UserModel = new UserModel('xiaoming');

@Component({
    selector: 'basic',
    styles:[require('./Basic.scss')], //内联样式,注意使用row-loader
    template: require('./Basic.html')
})

export class BasicComponent {

    users:Object;
    // 在构造函数中赋值
    constructor() {
            this.users= [ xiaomo,xiaoming];
    };
}

2. UserModel.ts

这里使用了uuid来创建一个随机的id作为唯一标识符

使用 public 可以不用再 this.name = name

import { uuid } from './../util/uuid';

export class UserModel{
    id :string;
    constructor(public name:string){
            this.id = uuid();
    }
}

3. Basic.html

使用ngFor 循环,index可以取到索引值(从0开始)

<div>
    <ul *ngFor="let item of users; let i = index">
        <li>{{i+1}} Hello {{item.name}}</li>
    </ul>
</div>