angularjs2 外部设置组件header的属性（二）

上一章我们说了自定义组件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