Вложенные компоненты. Как передать элемент данных из компонента, использующего * ngFor, в другой компонент, использующий рекурсию? - PullRequest
Новая
       18

Вложенные компоненты. Как передать элемент данных из компонента, использующего * ngFor, в другой компонент, использующий рекурсию?

0 голосов
/ 25 апреля 2020

Я создал свой собственный элемент с DropdownMenuTreeComponent для использования внутри другого компонента как и передаю ему nodeTree, который представляет собой массив узлов: 

nodeTree: Array<Node> = [];
Node = { Name:String, Children:Array<Node> }

Затем внутри DropdownMenuTreeComponent Я пытаюсь передать один узел из моего Array nodeTree в мой NodesRendererComponent, когда я вызываю его из шаблона DropDownMenuTreeComponent с помощью , и я передаю ему «узел» из nodeTree.

Проблема заключается в том, что когда я запускаю код, в то время как DropdownMenuTreeComponent может получить nodeTree из 1-го компонента, он вложен (DropdownMenuTreeComponent является 2-м компонентом), он не может передать его NodesRendererComponent как node.Name, который отображается как неопределенный, но я могу смотрите "Это работает!" текст на экране.

Мне нужны эти 3 уровня компонентов, потому что мне нужен мой NodesRendererComponent, чтобы он был рекурсивным, а другие аспекты сейчас неактуальны. Итак, что я делаю неправильно или как я могу заставить NodesRendererComponent получать каждый узел из nodeTree, в то же время имея возможность выполнять рекурсию?

DropdownMenuTreeComponent (вложенный компонент # 2): 

 @Component({
   template: `<div>  
                    <ul class="dropdown-menu-tree">
                    <li *ngFor="let node of nodeTree">
                       <nodes-renderer  [node]="node"></nodes-renderer>
                    </li>
                   </ul>
              </div>`,
   styleUrls: ['./dropdown-menu-tree.component.css']
 })

 export class DropdownMenuTreeComponent implements OnInit{
   @Input() nodeTree: any[];

   constructor() {}

   ngOnInit(){}

 }

NodesRendererComponent (Вложенный компонент № 3): 

@Component({
  selector: 'nodes-renderer',
  template: ` {{node.Name }}
              <p> This Works! </p>
              <li *ngFor="let node of node.Children">
              <nodes-renderer [node]="node"></nodes-renderer>`
    ,
})

export class NodesRendererComponent implements OnInit{
  @Input() node: any;

  constructor() { 

  }
  ngOnInit(){
  }

}
...