angularjs2 外部设置组件header的属性

Posted 2022-12-06 mangues

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