![](/img/trans.png)
[英]How to get Kendo ui angular 2 components to work in .NET MVC5?
[英]Cannot get “Kendo UI for Angular 2” components to work
我正在尝试构建一个使用“Kendo UI for Angular 2”控件的演示应用程序,但我似乎只能让 Button 控件工作。 所有其他控件要么显示错误,要么根本不显示。 我真的可以使用一些帮助,以便我可以弄清楚该产品是否值得我们正在启动的新长期项目的成本。
在下面的示例中,我使用 Angular 2 来显示它们的按钮和下拉列表。 只有按钮有效。 请帮我让这个样本工作。 我花了太长时间试图弄清楚这一点。 谢谢!
package.json(为简洁起见被截断)
"dependencies": {
...
"@progress/kendo-angular-buttons": "^0.10.2",
"@progress/kendo-angular-dropdowns": "^0.10.2",
...
systemjs.config.js(为简洁起见被截断)
map: {
app: 'app',
'rxjs': 'npm:rxjs',
'@progress': 'npm:@progress',
'@telerik': 'npm:@telerik',
...
},
packages: {
"@progress/kendo-angular-dropdowns": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
"@progress/kendo-angular-buttons": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
'@telerik/kendo-dropdowns-common': { main: './dist/npm/js/main.js', defaultExtension: 'js' },
...
}
app.module.ts
// Application
import { AppComponent } from './app.component';
// Misc Modules
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';
// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
// Test Pages
import { KButtonComponent } from './components/k.button.component'
import { KDropDownListComponent } from './components/k.dropdownlist.component'
@NgModule({
imports: [
BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button kendoButton (click)="onButtonClick()" [primary]=true>Button!</button> This works!
<kendo-dropdownlist [data]="listItems"></kendo-dropdownlist> This doesn't even display.
`,
styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css', '../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css' ]
})
export class AppComponent {
listItems: Array<string> = ['This', 'is', 'really', 'upsetting'];
onButtonClick() {
alert('The only working Kendo component');
}
}
使用命令npm install --save @telerik/kendo-theme-default
安装默认的 Kendo 主题( https://www.npmjs.com/package/@telerik/kendo-theme-default )。
在 index.html 中指定 CSS 文件,所有控件都将按预期显示。
<link rel="stylesheet" href="./node_modules/@telerik/kendo-theme-default/dist/all.css">
除了 systemjs.config.js 配置外,一切看起来都正确。 您的包定义需要将映射与您定义的库相匹配。 这是我的配置和作品,只需用您的组件定义替换我的网格组件定义。
systemjs.config.js
// map tells the System loader where to look for things map: { 'app': 'dist', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', ... '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl', '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid', '@telerik/kendo-intl': 'npm:@telerik/kendo-intl', }, // packages tells the System loader how to load when no filename and/or no extension packages: { 'app': { main: './app.main.js', defaultExtension: 'js' }, ... '@progress/kendo-angular-intl': { main: './dist/npm/js/main.js', defaultExtension: 'js' }, '@progress/kendo-angular-grid': { main: './dist/npm/js/main.js', defaultExtension: 'js' }, '@telerik/kendo-intl': { main: './dist/npm/js/main.js', defaultExtension: 'js' } } });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.