AngularJs 1.5+中的递归组件模板；_Angularjs_Angularjs Components

AngularJs 1.5+中的递归组件模板；

angularjs

AngularJs 1.5+中的递归组件模板；,angularjs,angularjs-components,Angularjs,Angularjs Components,最近我开始潜入angularJS。我阅读了一些关于基于组件的方法的主题，并决定进行一些实践。我想创建一个组件，它表示某种行的分层结构。我有一个表格行模型和两个控制器：表格行和整个表格： export class TreeTableRowModel { uniqueKey: string; loaded: boolean; showChildren: boolean; treeLevel: number; cells: any[]; // order

最近我开始潜入angularJS。我阅读了一些关于基于组件的方法的主题，并决定进行一些实践。我想创建一个组件，它表示某种行的分层结构。我有一个表格行模型和两个控制器：表格行和整个表格：

export class TreeTableRowModel {
    uniqueKey: string;
    loaded: boolean;
    showChildren: boolean;
    treeLevel: number;  
    cells: any[]; // order corresponds to columns order
    children: TreeTableRowModel[]; 
}

export class TreeTableRowController {
    public tableRowModel: TreeTableRowModel;  

    public constructor() {
        console.log("constructor called");
        console.log(JSON.stringify(arguments.length));
    }   
}   

export class TreeTableController {
    public maxTableInheritanceLevel: number;
    public rows: Array<TreeTableRowModel>;                 
}

导出类TreeTableRowModel{
唯一键：字符串；
加载：布尔；
showChildren：布尔；
treeLevel：数字；
单元格：任意[]；//顺序对应于列顺序
儿童：树形模型[]；
}
导出类TreeTableRowController{
公共tableRowModel:TreeTableRowModel；
公共构造函数（）{
log（“调用的构造函数”）；
log（JSON.stringify（arguments.length））；
}   
}   
导出类TreeTableController{
公共maxTableInheritanceLevel:编号；
公共行：数组；
}

我已经创建了模块，将控制器和组件注册到此模块中。以下是我的行组件代码：

    import * as angular from "angular";
import { TreeTableRowController } from "./TreeTableRowController.component";

var module = angular.module('treeTable', []);
module.controller('treeTableRowController', TreeTableRowController);
module.component('treeTableRow', {
    bindings: {
        tableRowModel: '<'
    },
    controller: 'treeTableRowController',
    controllerAs: 'row',
    template:   ['<div><span>test row: {{row}}</span></div>',
                '<div><span>test row.tableRowModel: {{row.tableRowModel}}</span></div>',

                '<div class="tree-table-row" ng-repeat="cellData in row.tableRowModel.cells">',  
                    '<span>inside cells ng-repeat test</span>',     
                    '<div class="tree-table-cell">',
                         '<i ng-if="$first" ng-class="row.tree_icon" ng-click="row.showChildren = !row.showChildren" class="indented tree-icon icon-plus fa fa-plus"></i>',
                         '<span>{{cellData}}</span>',
                     '</div>',
                '<div>'].join('')
                //'<treeTableRow ng-if="row.showChildren " ng-repeat="childRows in row.children"></treeTableRow>>' ].join('')    
});

    import * as angular from "angular";
import { TreeTableController } from "./TreeTableController";
import "../TreeTableRow/tree-table-row.component"

var module = angular.module('treeTable');
module.controller('treeTableController', TreeTableController );
module.component('treeTable', {
    bindings: {
        rows: '<',
        maxTableInheritanceLevel: '@'
    },
    controller: 'treeTableController',
    controllerAs: 'table',
    template:   ['<div class="tree-table">',
                    '<div class="tree-table-head">',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',                        
                        '<div class="tree-table-cell"></div>',        
                    '</div>',
                    '<div class="tree-table-body">', 
                        '<div ng-repeat="tRow in table.rows">',
                            '<span>tRow: {{tRow}}</span>',
                            '<tree-table-row tableRowModel="tRow"></tree-table-row>',
                        '</div>',
                        '<div class="tree-table-cell">',
                            '<span>TEST TEST TEST</span>',
                        '</div>',
                    '</div>',
                '</div>'].join('')    
});

import*从“角度”导入为角度；
从“/TreeTableRowController.component”导入{TreeTableRowController}”；
var module=angular.module（'treeTable'，[]）；
模块控制器（'treeTableRowController'，treeTableRowController）；
组件（'treeTableRow'{
绑定：{
tableRowModel:''。联接（''）
});

对于表格组件：

    import * as angular from "angular";
import { TreeTableRowController } from "./TreeTableRowController.component";

var module = angular.module('treeTable', []);
module.controller('treeTableRowController', TreeTableRowController);
module.component('treeTableRow', {
    bindings: {
        tableRowModel: '<'
    },
    controller: 'treeTableRowController',
    controllerAs: 'row',
    template:   ['<div><span>test row: {{row}}</span></div>',
                '<div><span>test row.tableRowModel: {{row.tableRowModel}}</span></div>',

                '<div class="tree-table-row" ng-repeat="cellData in row.tableRowModel.cells">',  
                    '<span>inside cells ng-repeat test</span>',     
                    '<div class="tree-table-cell">',
                         '<i ng-if="$first" ng-class="row.tree_icon" ng-click="row.showChildren = !row.showChildren" class="indented tree-icon icon-plus fa fa-plus"></i>',
                         '<span>{{cellData}}</span>',
                     '</div>',
                '<div>'].join('')
                //'<treeTableRow ng-if="row.showChildren " ng-repeat="childRows in row.children"></treeTableRow>>' ].join('')    
});

    import * as angular from "angular";
import { TreeTableController } from "./TreeTableController";
import "../TreeTableRow/tree-table-row.component"

var module = angular.module('treeTable');
module.controller('treeTableController', TreeTableController );
module.component('treeTable', {
    bindings: {
        rows: '<',
        maxTableInheritanceLevel: '@'
    },
    controller: 'treeTableController',
    controllerAs: 'table',
    template:   ['<div class="tree-table">',
                    '<div class="tree-table-head">',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',                        
                        '<div class="tree-table-cell"></div>',        
                    '</div>',
                    '<div class="tree-table-body">', 
                        '<div ng-repeat="tRow in table.rows">',
                            '<span>tRow: {{tRow}}</span>',
                            '<tree-table-row tableRowModel="tRow"></tree-table-row>',
                        '</div>',
                        '<div class="tree-table-cell">',
                            '<span>TEST TEST TEST</span>',
                        '</div>',
                    '</div>',
                '</div>'].join('')    
});

import*从“角度”导入为角度；
从“/TreeTableController”导入{TreeTableController}；
导入“./TreeTableRow/树表row.component”
变量模块=角度模块（'treeTable'）；
模块控制器（'treeTableController'，treeTableController）；
module.component（'treeTable'{
绑定：{
行：“由于HTML元素/属性不区分大小写，绑定的大小写与组件名称字符串类似，因此请尝试执行
谢谢您的提醒，它解决了问题。我确实浪费了大约5个小时来找出属性绑定在我的情况下不起作用的原因：）.但第二个问题出现了：是否有可能看到日志/调试角度绑定过程？当然。现在你和我们所有人都相处得很好，他们花了太多时间没有注意到这一点。我认为这是AngularJS新手的一个成年礼。就日志/调试而言……我不确定是否有一个超级简单的wa是的，但我有两个建议：1）在组件的控制器上定义。类似于“controller:function（）{this.$onChanges=function（changesObj）{console.log（changesObj）；}；}”2）使用Chrome你可以是的，最近我发现自己在Chrome中设置断点。我只是认为应该有内部直接角度的方法来轻松控制整个生命周期。似乎$onChanges部分实现了我的需要。再次感谢你！