作者:我们每次都聊撸 | 来源:互联网 | 2023-09-12 20:00
一、模仿Reddita)运行ngnew–ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为:界面可以看到了:b)对于界面输入的数
![技术分享](https://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSSWv3w7H7UHWl2ic2aUKnCZdAQOxSK3oMfOQNxjv5Bbgpibia1enPiaHP6gg3Ca1JNbSVZhnSXlTmxKaw/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
一、模仿Reddit
a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为:
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnc8IjLf6wloZ9Byv6Lod4BFWz81wCB1167Pk5cMgnzwSsXRjms5CY7w/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
界面可以看到了:
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnmYUzP56msWzgMeZuibmlH4chSZibUicZe7fublANbtqPtfP3F4TPsH5nw/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
b) 对于界面输入的数据,获取的方式有点特别,使用了#newlink这样的语法,newlink是一个对象,现在代表就是所在的input这个DOM元素。
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJn6bnJ8EvxU341FaacxkBk5CBeicdlyESOZHw7pJHDBkuicuArcJ6WiawRg/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
将对象作为参数传递给addArticle方法,在对应的ts代码中,可以获取newlink.value。newlink是HTMLInputElement类型。
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnrD4q0X6FErj8BRDWqLiaib33t04TUOROianT0q2AgtSnhnS1HE0DXlCtQ/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
c)关于参数的绑定,在html文件使用{{***}}这样的语法,ts代码中对应的参数如果发生变化会及时反映到界面。
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnWhib5lEv9BgCor5haQ63O3D9D0VLtaDBcOzybeTNkia3Mo3vWLsVyoNQ/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
接下来是像这样的文章列表,要添加Article组件,组件的selector为app-article,之后可以在主页面使用了。Article组件负责显示每一篇文章,数据要从外部传递,以满足复用的要求,@Input()article:Article定义了输入参数article。
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnA7ibkibJXwg4GHI4JfEMC4iawX28oeHv0hTa5Psy4wGWiaPMUicEQXXYn8A/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
在主界面显示文章列表时,用*ngFor遍历,使用[article]=”**”可以向组件传递参数。
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnYKYknxMCXfmOvU1jGrKecKfrQfGjgNLaU2jJf89KhwGtl3pricX4gOw/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
最后的效果为:
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJn2eJDRdToeiaPxw05mRGNuIGQIQUFSuj1H3UZcSCluKiaccM7zZIfxaLQ/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
点击up\down响应非常快,而且无刷新,但还不清楚背后的机制。
二、TypeScript
a)TypeScript是ES6(ECMAScript6)的超集,ES6相对于ES5增加了类、模块等特性,TypeScript则又在ES6的基础上增加了强类型的机制。现在支持ES6新标准的浏览器还比较少,ts代码会首先被编译成ES5代码。TypeScript由微软发起并开源,现在Google也在维护。TypeScript具有很多新特性,例如类型、类、装饰器、导入等。
b)Types,强类型有助于在编译的时候及早发现代码错误,并且强类型代码具有更好的可读性。TypeScript代码的写法,与C#在很多地方是相反的:
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnwHYFcgwh5WXR6qNnzJYvjp4xicdUqXKzuk6zGbfG7TyHmibbMYTXO4ow/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
类型有string、number、boolean、Array<>、enum、any,对于方法的返回值还有void。
c)Classes、Properties、Methods,在ES5中有面向对象的概念,但没有类,ES6为JS内置了类,声明语法为classTable {},类内可以声明具有类型的属性,属性使用时要用this,否则会提示找不到,方法也可以不指定返回类型(包括void),这样的方法可以返回任意类型的结果。
d)Constructors,构造函数见多了,但TypeScript的构造函数名称必须为constructor,构造函数可以有参数,但不能返回值,而且构造函数也不能有重载(ES6可以有)。
e)Inheritance
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnxWHfKSt3eDoHxrRZzHI0icUqBaQPOQUT0l07hwGwMicvuYgwnibKNxDGA/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
Car继承了Mechaine,使用extends关键字,通过super初始化父类或调用父类方法。父类的run方法就算不写修饰符也可以被派生类使用,猜想TypeScript中方法的默认修饰符是protected。
f)箭头函数Fat ArrowFunctions,不知道写个Fat是什么意思。与C#的lambda、匿名函数一个意思吧,在箭头函数中,this的作用域在函数内部。
g)字符串模板
![技术分享](http://mmbiz.qpic.cn/mmbiz_png/93vVribQAXSRhnpYFsECz44hn4NIBETJnwibu5diaa3k6KDib9fNb67f8tmoDVAzMB6xdr3pJ8ffI95aHVjqyiaH2Xw/640?wx_fmt=png&wxfrom=5&wx_lazy=1)
TypeScript的字符串模板使用方法,感觉没有string.Format方便的样子,还需要首先定义参数,这里使用倒引号。
学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda
Angular基础(三) TypeScript