上一章我们说了自定义组件header 和 listview,不过内部模板都是写死的没什么实际意义。组件实际上可以通过外部设置组件内部暴露的一些属性 才能在不改变代码的情况下复用。这一章将说怎么封装组件header达到外部设置title、登录注册的超链接。
如图外部设置 “简云” 登录注册超链接
1.这篇文章的目录文件,可以看到 在header目录下建立了一个bean文件header.bean.ts,这个类是用来封装传入到header组件中的属性信息

header.bean.ts:
就是一个bean类,用来封装需要传入组件的属性信息。
export class Header {
title: string; //标题
login: string; //登录超链接
register: string;//注册超链接
}
2.修改header.component.ts 文件,暴露出属性,达到外部传递Header类的目的
import { Component, Input } from '@angular/core';
import { Header } from './header.bean';
@Component({
moduleId: module.id,
selector: 'mangues-header',
templateUrl: './header.html'
})
export class HeaderComponent {
@Input()
bean: Header;
}
导入header.bean 类,和JAVA中类的引入相似
import { Header } from './header.bean';
@Input() 用来标记下面的Header类型的bean可以从外部的标签中传入。bean的类型就是Header
@Input()
bean: Header;
3.现在属性数据有了,可以外部传入title超链接有关信息了,我没就要用这些信息来修改对应模板header.html的数据了
<div class="top" *ngIf="bean">
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{bean.title}}</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<div>
<form class="navbar-form navbar-left" role="search" action="http://www.">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{bean.login}}"><span class="glyphicon glyphicon-user"></span>登录</a></li>
<li><a href="{{bean.register}}"><span class="glyphicon glyphicon-log-in"></span>注册</a></li>
</ul>
</div>
</div>
</nav>
我们可以看到原来写死”简云”,超链接的地方都被{{*}}这样的标记标识了
<a class="navbar-brand" href="#">{{bean.title}}</a>
<li><a href="{{bean.login}}"><span class="glyphicon glyphicon-user"></span>登录</a></li>
<li><a href="{{bean.register}}"><span class="glyphicon glyphicon-log-in"></span>注册</a></li>
这些是什么意思呢,这就是agularjs里面学过的东西,就是把上面通过@Input()标识过的属性Header传入的bean中的数据拿出来填充到模板我们写的{{*}}对应的地方
现在组件定义好了,我们就要拿来用了。
上一章我们说过在app.component.ts文件中利用标签可以引用我的定义的组件header。
4.这一章我们已经写好了可以传递属性的组件,就需要在这里把定义好的title传入组件中,让header组件展示我们设置的属性
如下代码:
import { Component } from '@angular/core';
import { Header } from './component/header/header.bean';
import { News } from './component/listview/news.bean';
@Component({
selector: 'my-app',
template: `<mangues-header [bean]="header"></mangues-header>
<mangues-listview></mangues-listview>`,
})
export class AppComponent {
header: Header = { title: '简云',
login: 'http://www.baidu.com' ,
register:'http://www.qq.com'};
}
可以看到
AppComponent类中定义了Header类的变量并初始化了title,超链接信息。
header: Header = { title: '简云',
login: 'http://www.baidu.com' ,
register:'http://www.qq.com'};
标签中加入了下面的代码 [bean] 就是header组件中定义的属性参数 ,=”header” 就是把AppComponent类中定义的header变量赋值给header组件中暴露的属性bean。
<mangues-header [bean]="header"></mangues-header>
总结:
这一章给header组件暴露的属性接口,可以在外部来动态改变组件的一个公共属性,可以用来在不改变组件代码的情况下进行复用。
下一章,我们将要来改造listview,并添加一个adapter类来外部自定义列表样式文件,并外部动态修改列表数据。开发过安卓的人应该知道 安卓中listview和adapter
github下载下载的demo直接到根目录执行
npm install
npm start