用户登录

中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

在页面上显示的这组内容列表是在 Post 组件里要显示的东西。回到项目,打开 Post 组件的视图,这里这个 post works 可以删除掉 .. 这样界面上就不会再显示这个段落文字了。

应用里的 Post 组件,里面渲染了一组内容列表,现在我想把列表项目单独放在一个组件里。在终端给项目生成一个组件,ng generate 一个 component ,放在 modules/post/components 里面,名字是 post-item 。

回到项目,先打开 Post 组件的模板文件,剪切一下 ul 元素里包装的这个 li 元素,这里可以换成刚才我们创建的 app-post-item 组件。

打开 PostItem 组件的模板文件,把刚才剪切的视图粘贴到这里,去掉 li 元素上的 ngFor 指令。这个组件里需要一个 entity 数据,它的值应该就是要显示的内容,里面有 title 还有 body 属性。

这个 entity 数据要在使用了 PostItem 组件的父辈那里绑定。打开 PostItem 组件,在组件里要添加一个 Input 属性,用一下 @Input 这个装饰器,它来自 @angular/core 这个包。

装饰的属性的名字可以是 entity,这样在使用这个组件的时候,可以给这个组件绑定一个 entity 属性。

属性的值的类型可以再设置一下,在 post 目录里面,新建一个 models 目录,里面添加一个 post.model.ts ,在这个文件里 export 一个 class ,名字叫 Post ,在类里添加一个构造方法,里面添加两个参数属性。public title ,类型是 string,public body,类型也是 string 。

回到 PostItem 组件,设置一下 entity 这个属性的类型,可以用一下 Post,这个东西来自刚才我们定义的 Post 类。

然后打开 Post 组件,在这个组件里用了一下 PostItem 组件,在组件上用一个 *ngFor,循环一下 Post 组件里的 entities 这组数据, let entity of entities。

PostItem 组件的模板里需要 entity 数据,这个属性我们已经在 PostItem 里面设置成了一个 Input 属性,所以在这里可以绑定一个 entity 属性,它的值就是每次循环的时候当前项目的名字,也就是 entity 。

回到浏览器再预览一下,现在页面上仍然会显示一组内容列表。

Input:父组件给子组件传递数据《 Angular:起步 2 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点