Question

我完全不熟悉HTML / Angular。我正在从有角度的网站（https://angular2-tree.readme.io/docs#basic-usage）上学习基本教程。

我现在遇到的问题是我不明白如何用网站上的声明在HTML文件中调用树：

<tree-root [nodes]="nodes" [options]="options"></tree-root>

对我来说，尚不清楚输出类如何重要/定义树中的节点以及该语句下的JSON“代码”的含义。任何帮助将不胜感激！

编辑：我的component.ts类

 @Component({
  selector: 'app-component',
  template: '<tree-root [nodes]="nodes" [options]="options"></tree-root>',
  templateUrl: './app.component.html'

})
export class App2Component {
  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};
}

和我的component.html类

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <h2>Project 2 Demo</h2>
  </div>

  <div class="panel panel-primary">
    <div class="panel-heading">
      Status
    </div>
    <div class="panel-body">
      <h3>{{title}}</h3>
      <tree-root [nodes]="[
  {
    id: 1,
    name: 'root1',
    children: [
      {
        id: 2,
        name: 'child1'
      }, {
        id: 3,
        name: 'child2'
      }
    ]
  }
]" [options]="options"></tree-root>
    </div>
  </div>
</div>

Answer 1

角度体系结构：-

1）<body>标记包含-根/父组件为<app-root></app-root>，即父模块，其中包含.ts，.html，.css，.spec文件。 2）所有其他模块都插入/加载到app.component.html模板中通过传递selector中的components或使用 <router-outlet></router-outlet>和data传递给child components 到selector中的child component(tree-root)和child component 从data到parent component收到Input()；

app.component.ts

@Component({
  selector: 'app',
  template: '<tree-root [nodes1]="nodes" [options1]="options"></tree-root>'
});

export class App {
  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};
}

tree-root.component.ts

@Component({
  selector: 'tree-root',  <--- selector
  template: ''
});
export treeclassComponent implements OnInit{
@Input() nodes1: any  <---- Recieve input from app.component.ts(parent) here
@Input() options1: any  <----Recieve  input here

constructor(){}
ngOnInit() {
console.log(nodes);
console.log(options);
}

Answer 2

我还建议使用Angular tutorial和docs。

JSON数组描述了树节点及其子节点（请参见here）。

树组件接收两个输入参数（请参见@Input），这些参数由node和options属性提供。

node数组提供有关树的节点和树的子级的信息。

tree组件将遍历给定的输入数组，并按照您的视图创建树。

更新：

要创建树，您需要在*.component.ts中创建对象数组，如下所示：

this.nodes = [
    {
        id: 1,
        name: 'root1',
        children: [
            {
                id: 2,
                name: 'child1'
            }, {
                id: 3,
                name: 'child2'
            }
        ]
    }
];

上面的示例来自Angular2 Tree Nodes。

更新2：

我看到您可以简单地使用以前发布的html，因为您在组件中声明了nodes数组：

<tree-root [nodes]="nodes" [options]="options"></tree-root>

此外，您还需要从template定义中删除@Component，它应该像这样：

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html'
})
....

在html文件中打开Angular Tree组件

2 个答案:

app.component.ts

tree-root.component.ts