Открытие компонента Angular Tree в html-файле - PullRequest
Новая
       1

Открытие компонента Angular Tree в html-файле

0 голосов
/ 14 ноября 2018

Я совершенно новичок в HTML / Angular. Я следовал базовому руководству с веб-сайта на английском языке (https://angular2 -tree.readme.io / docs # basic-use ).

Проблема, с которой я столкнулся сейчас, заключается в том, что я не понимаю, как я вызываю дерево в своем 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>

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Я также рекомендую Angular tutorial и docs .

Массив JSON описывает узлы дерева и их дочерние элементы (см. здесь ).

Компонент дерева получает два входных параметра (см. @Input), которые предоставляются свойством node и options.

node Массив s предоставляет информацию об узле дерева и дочерних элементах дерева.

Компонент дерева перебирает данный входной массив и создает дерево таким, каким вы его видите.

Обновление:

Чтобы создать дерево, вам нужно создать массив объектов в вашем *.component.ts, например: 

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

Пример выше от Узлы дерева Angular2 .

Обновление 2:

Как я вижу, вы можете просто использовать ранее опубликованный html, потому что вы объявили массив nodes в своемкомпонент:

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

Также вам нужно удалить template из вашего определения @Component, оно должно выглядеть так: 

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html'
})
....
0 голосов
/ 14 ноября 2018

Угловая архитектура: -

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 = {};
}

дерево-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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...