zoukankan      html  css  js  c++  java
  • Angular2快速入门-2.创建一个新闻列表

    背景:
    我们想通过一个例子,展示下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 {  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

     

  • 相关阅读:
    linux驱动开发学习一:创建一个字符设备
    如何高效的对有序数组去重
    找到缺失的第一个正整数
    .NET不可变集合已经正式发布
    中国人唯一不认可的成功——就是家庭的和睦,人生的平淡【转】
    自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试
    ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
    自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试
    ServiceStack 介绍
    一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL
  • 原文地址:https://www.cnblogs.com/clc2008/p/7880286.html
Copyright © 2011-2022 走看看