Angular 2 组件树
[英] Angular 2 components tree
本文介绍了Angular 2 组件树的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular 2 开发我的第一个应用程序，并且我已经为 Google Chrome 安装了 Augury 插件，以帮助我调试代码.
这是组件树和图表:
这是我的自定义组件 (DocumentsList) 的 HTML 模板:
<div class="table-row header"><div class="列索引">#</div><div class="包装器属性"><div class="wrapper title-comment-module-reporter"><div class="wrapper title-comment"><div class="列标题">标题</div><div class="列注释">注释</div>
<div class="wrapper module-reporter"><div class="列模块">模块</div><div class="columnreporter">Reporter</div>
<div class="wrapper status-owner-severity"><div class="wrapper status-owner"><div class="列状态">状态</div><div class="column owner">所有者</div>
<div class="列严重性">严重性</div>
<div class="包装图标"><div title="Watch" class="column watch"><span class="glyphicon glyphicon-eye-open"></span>
<div title="添加评论" class="列添加评论"><span class="glyphicon glyphicon-comment"></span>
<div class="包装日期"><div class="列日期">已创建</div><div class="column date">已更新</div><div class="列日期">到期</div>
<div *ngFor="let document of docs" class="table-row"><div class="列索引">{{document.id}}</div><div class="包装器属性"><div class="wrapper title-comment-module-reporter"><div class="wrapper title-comment"><div class="列标题">{{document.title}}</div><div class="column comment">{{document.comment}}</div>
<div class="wrapper module-reporter"><div class="列模块">{{document.module}}</div><div class="columnreporter">{{document.reporter}}</div>
<div class="wrapper status-owner-severity"><div class="wrapper status-owner"><div class="column status"><span class="label" [ngClass]="{'Open': 'label-primary', 'In Progress': 'label-success'}[document.status]">{{document.status}}</span></div><div class="column owner">{{document.owner}}</div>
<div class="列严重性高">{document.severity}}</div>
<div class="包装图标"><div class="column watch"><span class="glyphicon glyphicon-eye-open" [class.active]="document.watched"></span></div><div class="column add-comment"><span class="glyphicon glyphicon-comment" [class.active]="document.commented"></span></div>
<div class="包装日期"><div class="column date">{{document.created}}</div><div class="column date">{{document.updated}}</div><div class="column date">{{document.due}}</div>
由于图中的 span 是 div 的子元素，其中有一个 *ngFor 指令，所以不应该显示它在图中作为 span 的父级?
我认为图表应该是这样的(用 Paint 创建的图像)
解决方案
简短的回答，是的.有道理.
I'm developing my first application with Angular 2 and I have installed Augury plugin for Google Chrome, in order to help me debug the code.
Here's the components tree and graph:
This is the HTML template of my custom component (DocumentsList):
<div class="container-fluid" style="margin-top: 10px">
<div class="table-row header">
<div class="column index">#</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Title</div>
<div class="column comment">Comment</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Module</div>
<div class="column reporter">Reporter</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status">Status</div>
<div class="column owner">Owner</div>
</div>
<div class="column severity">Severity</div>
</div>
</div>
<div class="wrapper icons">
<div title="Watch" class="column watch">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
<div title="Add comment" class="column add-comment">
<span class="glyphicon glyphicon-comment"></span>
</div>
</div>
<div class="wrapper dates">
<div class="column date">Created</div>
<div class="column date">Updated</div>
<div class="column date">Due</div>
</div>
</div>
<div *ngFor="let document of docs" class="table-row">
<div class="column index">{{document.id}}</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">{{document.title}}</div>
<div class="column comment">{{document.comment}}</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">{{document.module}}</div>
<div class="column reporter">{{document.reporter}}</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label" [ngClass]="{'Open': 'label-primary', 'In Progress': 'label-success'}[document.status]">{{document.status}}</span></div>
<div class="column owner">{{document.owner}}</div>
</div>
<div class="column severity high">{document.severity}}</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" [class.active]="document.watched"></span></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment" [class.active]="document.commented"></span></div>
</div>
<div class="wrapper dates">
<div class="column date">{{document.created}}</div>
<div class="column date">{{document.updated}}</div>
<div class="column date">{{document.due}}</div>
</div>
</div>
</div>
Since the span in the graph is child of a div in which there is a *ngFor directive, shouldn't it be displayed in the graph as the parent of the span?
I think the graph should've looked like this (images created with Paint)
解决方案
Short answer, yes. It makes sense.
这篇关于Angular 2 组件树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
