Question

mxResources.loadDefaultBundle = false;
 var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
                mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

            // Fixes possible asynchronous requests
            mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
            {
                // Adds bundle text to resources
                mxResources.parse(xhr[0].getText());

            // Configures the default graph theme
            var themes = new Object();
            themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement(); 

            // Main
            new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
        }, function()
        {
            document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
        });
    })();`

我正在尝试在angular 4打字稿，HTML页面中实现Orgchart。经过mxgraph和drawio找不到任何好运的帮助

Answer 1

请尝试 ng2-org-chart

请在此处找到文档

https://www.npmjs.com/package/ng2-org-chart

Answer 2

@Aarthi我认为这与如何使用angular 2+构建递归组件有关。以下代码段来自嵌套组织结构图节点组件的模板文件。有关更多详细信息，请参阅此演示-https://stackblitz.com/edit/ng-orgchart

<div class="oc-node" [class.oc-is-selected]="isSelected" (click)="onClickNode($event)">
    <ng-container
        *ngTemplateOutlet="nodeTemplate ? nodeTemplate : defaultNodeTemplate; context:{ datasource:datasource,nodeHeading: nodeHeading, nodeContent: nodeContent }">
    </ng-container>
    <i *ngIf="datasource.children" [ngClass]="{'oc-icon-plus': isCollapsed, 'oc-icon-minus': !isCollapsed}" (click)="toggleChildren()" class="oc-toggle-btn oc-icon"></i>
</div>
<div *ngIf="datasource.children" [@expandCollapse]="isCollapsed ? 'collapsed' : 'expanded'"
    (@expandCollapse.start)="toggleAnimStart($event)" (@expandCollapse.done)="toggleAnimEnd($event)"
    [ngStyle]="ecStyles" class="oc-groups">
    <ng-container *ngFor="let node of datasource.children;let i=index">
        <div *ngIf="i % groupScale === 0" class="oc-group">
            <ng-container *ngFor="let temp of Arr(groupScale);let j=index;">
                <orgchart-node *ngIf="i + j < datasource.children.length" [datasource]="datasource.children[i + j]"
                    [nodeHeading]="nodeHeading" [nodeContent]="nodeContent" [nodeTemplate]="nodeTemplate"
                    [groupScale]="groupScale" [select]="select" (nodeClick)="onNodeClick($event)">
                </orgchart-node>
            </ng-container>
        </div>
    </ng-container>
</div>

<ng-template #defaultNodeTemplate let-nodeData="datasource" let-heading="nodeHeading" let-content="nodeContent">
    <div class="oc-node-heading">{{nodeData[heading]}}</div>
    <div class="oc-node-content">{{nodeData[content]}}</div>
</ng-template>

如何在Angular4的Typescript中实现Orgchart

2 个答案: