Angular 2组件树 [英] Angular 2 components tree

问题描述

我正在使用Angular 2开发我的第一个应用程序，并且已经安装了适用于Google Chrome的Augury插件，以帮助调试代码.

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.

这是组件树和图形:

这是我的自定义组件(DocumentsList)的HTML模板:

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>

由于图形中的span是div的子级，其中有*ngFor指令，因此它不应该作为span的父级显示在图形中吗?

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?

我认为图形应该看起来像这样(用Paint创建的图像)

I think the graph should've looked like this (images created with Paint)

推荐答案

简短的回答，是的.这是有道理的.

Short answer, yes. It makes sense.

这篇关于Angular 2组件树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！