上篇(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. selenium学习笔记(加入unittest)

    利用firefox浏览器的selenium IDE可以直接生成webdriver+unittest的python脚本 当然博主是要为了自己编写脚本.对用例内容进行了修改,把元素校验功能也放入了用例中 ...

  2. 分享知识-快乐自己:Ajax 跨域请求处理

    <%-- Created by IntelliJ IDEA. User: asus Date: 2019/1/24 Time: 15:57 To change this template use ...

  3. mysql 习题

    习题1 1.创建一个库(dt55_mysql),在库下创建一张students表 (1)students表中的字段有:id(int类型),stuName(varchar类型),age(int类型),w ...

  4. hdu4715

    题解: 二分图判断 建立原图的补图 判断是否是二分图 代码: #include<cstdio> #include<cmath> #include<cstring> ...

  5. pycharm 设置 默认信息

    在pycharm使用过程中,对于每次新建文件的shebang行和关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择File-Settings, 2 ...

  6. 服务器(Ubuntu 12.04 LTS)上编译基于OpenCV的项目遇到的问题及解决方案

    问题1:OpenCV编译安装时出错,错误信息中提到要打开-fPIC 选项重试. 解决方案:使用如下命令运行CMake cmake -DWITH_1394=OFF -DWITH_CUDA=OFF -DW ...

  7. Git的origin和master分析

    首先要明确一点,对git的操作是围绕3个大的步骤来展开的(其实几乎所有的SCM都是这样) 1. 从git取数据(git clone) 2. 改动代码 3. 将改动传回git(git push) 这3个 ...

  8. 《Drools7.0.0.Final规则引擎教程》第4章 4.2 activation-group& dialect& date-effective

    activation-group 该属性将若干个规则划分成一个组,统一命名.在执行的时候,具有相同activation-group 属性的规则中只要有一个被执行,其它的规则都不再执行.可以用类似sal ...

  9. 8.var目录下的文件和目录详解

    1./var目录下的文件和目录详解. /var (该目录存放的是不断扩充且经常修改的目录,包括各种日志文件或者pid文件,存放linux的启动日志和正在运行的程序目录(变化的目录:一般是日志文件,ca ...

  10. MS SQL Server2000转换成MySQL

    按计划今天着手进行将后台数据库从MS SQL Server2000转换成MySQL5.1.3.目的是便于发布软件的测试版本. 1. 驱动: mysql-connector-odbc-5.1.11-wi ...