Angular2火速入门-2.创办八个信息列表分分快三计划

作者:分分快三计划

第一、创建news-detail.component

1)创建news-detail.component.ts

import {Component,Input} from '@angular/core';
import {News} from  './news';

@Component({
    selector:'news-detail',
    templateUrl:'./news-detail.component.html',
    styleUrls:['newslist.component.css']    
})
export class NewsDetailComponent{
   @Input() news:News;
}

2)创建news-dtail.component.html     

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

 news-dtail.component.html : 把原先在newslist.component.html 中新闻详细页的模板内容剪切到 此处

 

修改 newslist.component.html

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

<news-detail [news]="selectedNew"></news-detail>

  

       newslist.component.html    : 增加新的新闻详细模板标签 <news-detail [news]="selectedNew"></news-detail>

       注意此处的 [news]="selectedNew"这种写法,这是属性绑定(需要我们在类中 设置属性绑定标签@Input(),可以看new-detail 类), 即news-dtail.component 的属性 news 需要newslist.component.ts中的selectedNew 赋给

新闻详细模板中有个news属性,该属性的值是新闻列表中的selectedNew赋给的。   

 

我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component,

第二、把news-dtail组件增加到app.module上去

上面已经完成new-detail 的详细组件,但是并不work,还需要我们把新增加到 NewsDetailComponent 类增加到启动模块中,

具体修改 app.module.ts

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

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

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

命令行,执行npm start,可以看到程序运转起来和上篇完全一样,但是我们把新闻列表和新闻详细都独立开来,便于重复利用。 

第一、创建新闻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}} {{n.create_date}}        
    </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 并不能看到我们的新闻列表

分分快三计划 1

上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来

背景:

第三、总结

1.注意属性执行令@Input 的使用,需要在@angular/core 中引入类Input,属性绑定时候使用中括号内写属性,例如:<news-detail [news]="selectedNew"></news-detail>

  1. 新增加的Component 一定要在app.module.ts中注册。

 

例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息,

新闻详细单独一个component

第三、增加新闻明细

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

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 可以看到如下结果

分分快三计划 2

 

第二、集成到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 ,运行结果如下

分分快三计划 3

第四、总结

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

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

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

 

 

 

 

 

在详细信息中可以修改新闻标题。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 Angular2