这篇文章主要介绍Angular4中如何实现绑定和分包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联服务项目包括铁西网站建设、铁西网站制作、铁西网页制作以及铁西网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,铁西网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到铁西省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
src目录下的app/app.component.ts文件是一个标准的angular4组件的结构。
上面@component()括号内template属性里用`(这个符号不是单引号,而是键盘1左边、tab键上面的那个符号)包裹的是View,下面export的class部分是Controller。
希望实现的效果长这个样子:
万里长征第一步,先从修改View开始。
修改temlate里的HTML文件,改成下面的样子:
Hello,World
你好,gundam meister
海牛高达海牛高达 NewType
上面部分先充当项目简介。
中间的span假装是高达列表。
下面的div包裹的两个span假装是高达详情。
刷新页面,现在是这个样子的:
好吧我承认和效果图比起来是挫了一点,但是现在先专注于功能实现。
需要实现的功能是:点击高达列表,可以显示高达详情。
正常的情况下,当然不会用常量去渲染页面。而如何沟通Controller和View就是Angular用Model干的事情:绑定。
绑定:你有我有全都有。
在同一个组件(component)内,在class(Controller)里定义的变量名,可以直接在template(View)里使用。
@Component({ selector: 'my-app', template: `Hello,World
你好,gundam meister
{{name}}{{name}} {{type}}` }) export class AppComponent { name = '海牛高达'; type = 'NewType'; }
刷新页面,依然可以显示:
当然,gundam其实是一个类,所以现在是model上场的时候了。
定义一个类 gundam:
class Gundam { name: string; type: string; }
改写name和type,让他们成为属性值而不是string常量:
gundam: Gundam = { name: '海牛', type: 'NewType' };
typescript 的语法有点奇怪,定义某个变量是某种类型的写法,是变量名在前变量类型在后。
改变temple里的引用:
Hello,World
你好,gundam meister
{{gundam.name}}{{gundam.name}} {{gundam.type}}
刷新页面:
继续review代码。
主页展示的是一个gundam列表而不是某一个gundam,所以用一个gundam数组去冒充数据。
const gundams: Gundam[] = [ {name: '海牛高达', type: 'NewType'}, {name: '巴巴托斯', type: '近战'}, {name: '力天使', type: '射击'} ];
之前的angular提供了ng-repeat的标签来循环列表,不过现在4.0以上的时代变成了标签里一个特殊的修饰:*ngFor。
修改class里的代码,定义一个变量gundams接受数组:
gundams = GUNDAMS;
修改template,用*ngFor循环解析数组,进行数据渲染:
Hello,World
你好,gundam meister
{{gundam.name}}{{gundam.name}} {{gundam.type}}
刷新页面:
列表已经根据数据来变化了(当然数据流还是有待商榷),下面来修改使得详情能根据点击的列表项变化。
每一个html标签都有事件(click hover 等等),而angular也继续调用了这些事件,只是写法不太一样。
解释:点击触发class中的onSelected方法,同时把gundam作为参数传递进去。
因为View里用到的onSected函数来自controller,也就是class,所以需要补充:
selectedGundam: Gundam; // 定义一个selectedGudam作为接收详情的变量 onSelected (gundam: Gundam) : void{ this.selectedGundam = gundam; // 通过参数赋值 }修改template中的html显示:
{{selectedGundam.name}} {{selectedGundam.type}}此时刷新页面会报错,因为虽然通过点击div可以给selectedGudam赋值,但是当selectedGundam被初始化的时候是没有值的。
有两种解决办法:
第一就是给selected设定初始值并设定初始被选择的div。
另一种就是根据selected有没有被初始化,决定显示不显示详情的div。
因为angular提供了ngIf修饰,用第二种方法会比较省事一点。
{{selectedGundam.name}} {{selectedGundam.type}}刷新页面
点击巴巴托斯
总的来说,写到这里业务逻辑已经完成了一半,甚至更多。因为本身项目就是一个点击查看的单页面应用,并不太复杂。但是所有的代码都挤在一个类里,可读性和扩展性都会变的很差。
所以是时候开始下一步了。分包的精髓:拆。
import { Component } from '@angular/core'; class Gundam { name: string; type: string; } const GUNDAMS: Gundam[] = [ {name: '海牛高达', type: 'NewType'}, {name: '巴巴托斯', type: '近战'}, {name: '力天使', type: '射击'} ]; @Component({ selector: 'my-app', template: `Hello,World
你好,gundam meister
{{gundam.name}}{{selectedGundam.name}} {{selectedGundam.type}}` }) export class AppComponent { gundam: Gundam = { name: '海牛', type: 'NewType' }; gundams = GUNDAMS; selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量 onSelected (gundam: Gundam): void { this.selectedGundam = gundam; // 通过参数赋值 } }现在一个component挤了太多的东西,有数据、有常量、有template和class。如果项目很小的话(比如这个demo)还可以接受,但是一旦业务逻辑繁琐起来就是totally disaster。
就算不介意坑别人,也别给隔了很久再去维护的自己找麻烦。
先把gundam这个class给摘出来,既然是model就好好呆在model的地方。
在src下新建model的包,新建一个gundam.ts的文件,把gundam class给ctrl+x过去。
在原本的地方导入:
import { Gundam } from '../../model/gundam';再把数组常量给挪走,理论上数据是需要从服务端取,但是我不写服务端好多年,所以还是继续使用假数据。
在src新建包service,新建data.ts文件,导入gundam类以后导出数组:
import { Gundam } from './../model/gundam'; export const GUNDAMS: Gundam[] = [ {name: '海牛高达', type: 'NewType'}, {name: '巴巴托斯', type: '近战'}, {name: '力天使', type: '射击'} ];在原位置引入使用:
import { GUNDAMS } from './../../service/data';ps:不要忘记在每个文件后空一行.虽然不空可以正常运行,但是会有错误提示.总的来说就是这么一个格式要求.
此时可以正常显示,而app.component.ts里已经整洁多了。
但是还不够,现在要把详情分离出去。让上帝的归上帝,凯撒的归凯撒。主页就处理主页数据,详情就处理详情数据。
换句话说,把首页分成两个页面:首页 + 详情。
需要用到的就是route。
PS,有关绑定:
Angular的绑定很有意思,有双向的也有单向的,有在class里声明一个变量在template里使用的,也有在template里暴露一个class里的变量给外界赋值的。目前我见到的是如下三种写法(指在view里):
1){{变量名}},单项绑定,class中的值会显示到view里。
2)[变量名],单项绑定,一般后面还会跟个“=”,用来给class里的变量或者属性赋值。
3)*ngModel=[(变量名)],双向绑定。有关双向绑定其实我还是有点不理解,官方文档上也只是在表单处理时应用。大体上说双向绑定就是绑定值后在页面修改值可以影响class内的值,而class内的值改变后view的值也会改变。
比如可以双向绑定一个input,初始化的时候从服务端读取一个值放进去,同时这个值是可以修改的。修改完毕class里的值也变了,可以直接提交而不用多写拿value的步骤。
以上是“Angular4中如何实现绑定和分包”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
文章名称:Angular4中如何实现绑定和分包
当前路径:http://kswsj.cn/article/pigigg.html