我已经克隆了this,并使其全部工作并显示在Sharepoint Webpart中。我需要使用Angular,此仓库似乎是最新的工作版本之一。 现在,我想实现剑道树视图。由于我使用的是AngularCli 1.7.4,因此已通过manual安装程序进行了安装。 然后,我复制了在树视图示例中看到的所有内容。由于我仍在使用存储库,因此添加了一些东西来使其正常工作。我得到了app.component.ts:
import { Component, Input, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<kendo-treeview
[nodes]="data"
textField="text"
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
childrenField="items"
>
</kendo-treeview>
`
})
export class AppComponent {
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' }
]
}
];
@Input() description = 'Angular';
// title = 'Angular';
constructor(elm: ElementRef) {
this.description = elm.nativeElement.getAttribute('description');
console.log('******COMPONENT******');
}
}
然后我修改了app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }
最后但并非最不重要的我的main.ts看起来像这样:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
我希望树视图像示例here那样显示,但是它仅显示两个节点项“家具”和“装饰”,而没有任何功能。
希望您能帮助我! 在此先多谢! 范基