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

新闻详细单独一个component

第一、创建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}} <span>{{n.create_date}}</span>
</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赋给的。

第二、把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,可以看到程序运转起来和上篇完全一样,但是我们把新闻列表和新闻详细都独立开来,便于重复利用。

第三、总结

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

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

Angular2快速入门-3.多个组件(分离新闻列表页和详细页)的更多相关文章

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

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

  2. Angular2快速入门-5.使用http(新闻数据来自http请求)

    Angular2官网通过http请求模拟API 来请求hero 数据,感觉有点繁琐,很让人理解不了,我们不采用它的办法,直接展示怎么使用http请求来获取我们的数据 ,直截了当. 第一.准备工作,创建 ...

  3. Angular2快速入门-4.创建一个服务(创建NewsService提供数据)

    上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...

  4. 快速入门系列--Log4net日志组件

    Log4net是阿帕奇基金会的非常流行的开源日志组件,是log4j的.NET移植版本,至今已经有11年的历史,使用方便并且非常稳定,此外很重要的一点是其和很多开源组件能很好的组合在一起工作,例如NHi ...

  5. Angular2快速入门-1.创建第一个app

    一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作   1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位 ...

  6. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  7. angularAMD快速入门

    ngularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.他特别适合快速开发SPA应用,适当的和 ...

  8. Vue.js——60分钟组件快速入门

    一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

  9. Transform组件C#游戏开发快速入门

    Transform组件C#游戏开发快速入门大学霸 组件(Component)可以看作是一类属性的总称.而属性是指游戏对象上一切可设置.调节的选项,如图2-8所示.本文选自C#游戏开发快速入门大学霸   ...

随机推荐

  1. easyui-textbox高为0

    之前在项目中也遇到过,一段时间没遇到这种问题居然又忘记了,想着还是在博客中记录一下,方便自己记忆,也供大家参考. 大家是否也遇到过easyui-textbox高为0的情况呢 像这样:  用户名:< ...

  2. day5-python中的序列化与反序列化-json&pickle

    一.概述 玩过稍微大型一点的游戏的朋友都知道,很多游戏的存档功能使得我们可以方便地迅速进入上一次退出的状态(包括装备.等级.经验值等在内的一切运行时数据),那么在程序开发中也存在这样的需求:比较简单的 ...

  3. WCF基础:绑定(三)

    在WCF绑定体系中,绑定创建绑定元素,绑定元素创建绑定监听器/绑定工厂,绑定监听器/绑定工厂创建信道. WCF中绑定是有多个信道相连组成的信道栈,在这个信道栈中必须包含传输信道和编码信道,而且传输信道 ...

  4. day13作业

    #作业1猜年龄 , 可以让用户最多猜三次! # Auther:bing #!/usr/bin/env python age = 24 print("猜年龄") for i in r ...

  5. win7 秘钥

    链接 安装好Windows7后右击计算机--属性--更改产品密匙 输入以下密匙; RHTBY-VWY6D-QJRJ9-JGQ3X-Q2289 HT6VR-XMPDJ-2VBFV-R9PFY-3VP7R ...

  6. 网站 安全 ---- 常见的 web 攻击

    网站 安全 ---- 常见的 web 攻击 1 sql 注入(常用的攻击性)(django的orm是做过sql防护处理的) 危害: 非法读取,篡改,删除数据库中的数据 盗取用户的各类敏感信息.获取利益 ...

  7. 测试中认识 sqlite

    1.SQLite,是一款轻型的数据库:简单, 轻松的API 单词速记中单词离线包也用到sqlite 百度了一下,基本的使用语句: .help .quit sqlite3 testDB.db 在当前目录 ...

  8. VSCode打开文件总是会覆盖上次打开的标签

    在使用VSCode的时候,打开一个文件之后,如果没有修改的话,那么再打开下一个文件的时候,他总会替换上次打开的标签,那么怎么样才能每次都在新的标签打开文件呢? 实际上,这种情况的出现是因为我们点击文件 ...

  9. 编写实现字符串拷贝函数strcpy()完整版

    有个题目编程实现字符串拷贝函数strcpy(),很多人往往很快就写出下面这个代码. void strcpy( char *strDest,char *strSrc ) { while(( *strDe ...

  10. HDU - 6197:array array array (简单LIS)

    One day, Kaitou Kiddo had stolen a priceless diamond ring. But detective Conan blocked Kiddo's path ...