Angular-Kendo treeview focus() 方法

Question

尝试 focus() 使用 ElementRef 在此 plunker 中的树视图节点上。我评论了底部的两行，因为它们不起作用。

下面是代码清单的插件：

https://plnkr.co/edit/aUnechu6glXk5CMFsMex?p=preview

import { Component, ElementRef, ViewChild } from '@angular/core';


 @Component({
     selector: 'my-app',
     template: `
     <kendo-treeview
         #treeview
         [nodes]="data"
         textField="text"
         kendoTreeViewCheckable
         kendoTreeViewExpandable
         kendoTreeViewSelectable

         kendoTreeViewHierarchyBinding
         childrenField="items">
     </kendo-treeview>
 `
 })
 export export class AppComponent {
   @ViewChild("treeview") treeview: ElementRef;
     public data: any[] = [
         {
             text: "Furniture", items: [
                 { text: "Tables & Chairs" },
                 { text: "Sofas" },
                 { text: "Occasional Furniture" }
             ]
         },
         {
             text: "Decor", items: [
                 { text: "Bed Linen" },
                 { text: "Curtains & Blinds" },
                 { text: "Carpets" }
             ]
         }
     ]; 
     //let tree = this.treeview.nativeElement;
     //this.treeview.focus('0');
 }

并且 focus() 方法根据他们的文档和示例在此处：

https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-focus

如何在我的组件代码中以编程方式 focus()，而不是在他们的文档中发布的 click() 事件？

Answer 1

需要在其中执行的代码Angular's lifecycle hooks or from a method. We need either a ngAfterViewInit or a custom AppComponent.focus() method that ViewChild有时间实例化TreeView实例：

ngAfterViewInit(){
   //XXX: this.treeview is the TreeViewComponent instance set by ViewChild decorator 
   this.treeview.focus('1');
}

Angular-Kendo treeview focus() 方法

Angular-Kendo treeview focus() method

kendo-ui-angular2

kendo-treeview