积跬步,至千里
精前端,通全栈

在Angular中使用组件递归

有时需要递归地呈现模板。例如,当您有一个带有评论的页面时,您需要能够呈现嵌套的评论并重用相同的组件。

在本文中,我们将创建一个组件,该组件将接受@Input的评论数据,并知道如何递归地显示它们。

数据结构

这是我们希望从服务器获得的JSON结构。我们将使用静态数据来演示实现过程。(你可以根据自己的喜好改变这种结构)

创建 Comments Component

如您所见,我们可以递归地调用我们的组件。我们不希望在没有评论时呈现组件,因此我们需要添加该ngIf 指令。(如果您没有附加到宿主元素(host)的任何样式,则不需要)

App Component

组件渲染结果

看上图,想象数字换成文字,加上一个头像,就是我们在社交网上常见的楼层评论了。(目前主流的评论展示方式都是两层,相互@对方,类似微信朋友圈,以往更多的方式就是和上图效果 ),使用组件递归的方式,确实是比较方便和简单实现这种场景的。

赞(0) 打赏
未经允许不得转载:前端学堂 » 在Angular中使用组件递归

讨论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端实战学习群 学以致用,进步更快

demo演示立即加入

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏