Angular2快速入门-3.多个组件(分离新闻列表页和详细页)
上篇(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.多个组件(分离新闻列表页和详细页)的更多相关文章
- Angular2快速入门-2.创建一个新闻列表
背景: 我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component, 例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息, 在详细信息中可 ...
- Angular2快速入门-5.使用http(新闻数据来自http请求)
Angular2官网通过http请求模拟API 来请求hero 数据,感觉有点繁琐,很让人理解不了,我们不采用它的办法,直接展示怎么使用http请求来获取我们的数据 ,直截了当. 第一.准备工作,创建 ...
- Angular2快速入门-4.创建一个服务(创建NewsService提供数据)
上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...
- 快速入门系列--Log4net日志组件
Log4net是阿帕奇基金会的非常流行的开源日志组件,是log4j的.NET移植版本,至今已经有11年的历史,使用方便并且非常稳定,此外很重要的一点是其和很多开源组件能很好的组合在一起工作,例如NHi ...
- Angular2快速入门-1.创建第一个app
一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作 1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位 ...
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- angularAMD快速入门
ngularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.他特别适合快速开发SPA应用,适当的和 ...
- Vue.js——60分钟组件快速入门
一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...
- Transform组件C#游戏开发快速入门
Transform组件C#游戏开发快速入门大学霸 组件(Component)可以看作是一类属性的总称.而属性是指游戏对象上一切可设置.调节的选项,如图2-8所示.本文选自C#游戏开发快速入门大学霸 ...
随机推荐
- selenium学习笔记(加入unittest)
利用firefox浏览器的selenium IDE可以直接生成webdriver+unittest的python脚本 当然博主是要为了自己编写脚本.对用例内容进行了修改,把元素校验功能也放入了用例中 ...
- 分享知识-快乐自己:Ajax 跨域请求处理
<%-- Created by IntelliJ IDEA. User: asus Date: 2019/1/24 Time: 15:57 To change this template use ...
- mysql 习题
习题1 1.创建一个库(dt55_mysql),在库下创建一张students表 (1)students表中的字段有:id(int类型),stuName(varchar类型),age(int类型),w ...
- hdu4715
题解: 二分图判断 建立原图的补图 判断是否是二分图 代码: #include<cstdio> #include<cmath> #include<cstring> ...
- pycharm 设置 默认信息
在pycharm使用过程中,对于每次新建文件的shebang行和关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择File-Settings, 2 ...
- 服务器(Ubuntu 12.04 LTS)上编译基于OpenCV的项目遇到的问题及解决方案
问题1:OpenCV编译安装时出错,错误信息中提到要打开-fPIC 选项重试. 解决方案:使用如下命令运行CMake cmake -DWITH_1394=OFF -DWITH_CUDA=OFF -DW ...
- Git的origin和master分析
首先要明确一点,对git的操作是围绕3个大的步骤来展开的(其实几乎所有的SCM都是这样) 1. 从git取数据(git clone) 2. 改动代码 3. 将改动传回git(git push) 这3个 ...
- 《Drools7.0.0.Final规则引擎教程》第4章 4.2 activation-group& dialect& date-effective
activation-group 该属性将若干个规则划分成一个组,统一命名.在执行的时候,具有相同activation-group 属性的规则中只要有一个被执行,其它的规则都不再执行.可以用类似sal ...
- 8.var目录下的文件和目录详解
1./var目录下的文件和目录详解. /var (该目录存放的是不断扩充且经常修改的目录,包括各种日志文件或者pid文件,存放linux的启动日志和正在运行的程序目录(变化的目录:一般是日志文件,ca ...
- MS SQL Server2000转换成MySQL
按计划今天着手进行将后台数据库从MS SQL Server2000转换成MySQL5.1.3.目的是便于发布软件的测试版本. 1. 驱动: mysql-connector-odbc-5.1.11-wi ...