Angular2快速入门-2.创建一个新闻列表

2018-06-24 00:51:02来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

背景:
我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component,
例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息,
在详细信息中可以修改新闻标题。
 

第一、创建新闻Component(视图组件)

 
接着上篇文章,我们在app文件下创建news文件夹,在news文件夹下我们需要创建一个新闻的实体类
1)news.ts
export class News{
    id:number;
    title:string;
    create_date:string;
    click:number;    
}

接着我们创建一个模拟新闻列表的类

2)mock-news.ts

import {News} from './news';

export const NewList: News[] = 
[
    { id: 1, title: '十九大最新報道', create_date: '2017-11-10', click: 10 },
    { id: 2, title: '西二旗地铁空车', create_date: '2017-10-10', click: 11 },
    { id: 3, title: '日本有开始找事了', create_date: '2017-11-12', click: 12 }
]

准备好上面的工作,我们真正需要创建component了,

3)创建newslist.component.ts

import { Component } from '@angular/core';
import { News } from './news';
import { NewList } from './mock-news';

@Component({
    selector:'news',
    templateUrl:'./newslist.component.html',
    styleUrls:['./newslist.component.css']
})
export class NewsListComponent{
    newlist = NewList;    
}

4)创建 newslist.component.html

<h2>新闻列表</h2>
<ul class="ul_news">
    <li *ngFor="let n of newlist"  >
        {{n.id}}.{{n.title}} <span>{{n.create_date}}</span>        
    </li>
</ul>

5)创建newslist.component.css

*{margin: 0px; padding: 0;}
.ul_news{list-style: none; margin-bottom: 10px; }
.ul_news li { width: 300px; height: 30px; line-height: 30px; text-align: left; padding:5px;
    border-bottom: 1px dashed #ccc;
cursor:pointer;}

.ul_news li:hover{background:blanchedalmond;}
.ul_news li span{float:right;}

至此,我们已经创建完成,目录结果如下图,此时运行npm start 并不能看到我们的新闻列表

第二、集成到app.module上

想在运行时预览需要把我们的NewListComponent 装载到 app.module.ts中,因为他是根模块,启动从这里开始

具体调整入下

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NewsListComponent } from './news/newslist.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    NewsListComponent    
  ],
  imports: [
    BrowserModule,
    FormsModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

可以看到,我们增加了NewsListComponent ,同时在NgModule的declarations中加入NewsListComponent

另外在app.component.html增加上我们的新视图标签 news

 <h1>
    Welcome to {{title}}!
  </h1> 
  <news>

  </news>
 

  

在命令行中 运行npm start ,运行结果如下

第三、增加新闻明细

我们想在用户点击新闻列表的时候下面展示新闻的详细信息,该如何操作那

1)修改 newslist.component.ts

import { Component } from '@angular/core';
import { News } from './news';
import { NewList } from './mock-news';

@Component({
    selector:'news',
    templateUrl:'./newslist.component.html',
    styleUrls:['./newslist.component.css']
})
export class NewsListComponent{
    newlist = NewList;
    selectedNew:News;
    onSelected(n:News):void{
        this.selectedNew=n;         
    }
}

增加属性selectedNew 和事件 onSelected 方法。

同时记得在newlist.component.html 的新闻项上增加

 

<li *ngFor="let n of newlist" (click)="onSelected(n)" >

 

2)修改newlist.component.html

在后面追加代码

<div *ngIf="selectedNew">
    <h3>新闻详细</h3>
    <table>
        <tr>
            <td>id:</td>
            <td> {{selectedNew.id}}</td>
        </tr>
        <tr>
            <td>title:</td>
            <td>
                <input [(ngModel)]="selectedNew.title" placeholder="title" />
            </td>
        </tr>
    </table>

</div>

  此时要注意,[(ngModel)] 是Angular的双向绑定(先会用,以后再慢慢了解其中的原理),需要在app.module.ts中引入FormsModule ,否则页面会报错。

 3)再次运行 npm start 可以看到如下结果

第四、总结

1.熟悉Component的创建,注意装饰器的写法@Component 中的标签,另外templateUrl,可以自己使用 template:,通常简单的时候可以直接使用

2.熟悉指令*ngFor,*ngIF,(click)的绑定,双向绑定[(ngModle)] 的用法

3.了解NgModule 和Component的关系,一个app的根模块通常都是app.module.ts

 

 

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:nodejs的__dirname与__filename

下一篇:javascript实现选项卡切换的4种方法