Question

我对Angular和Kendo UI还是很陌生，所以我确定自己做错了什么，但我不知道该怎么办。我创建了一个测试项目，并希望使用一些Kendo布局组件来布置基本的外壳。我导入了包裹

我使用ng add @progress/kendo-angular-layout添加了该程序包，它运行通过并说可以。我在我的IDE（Webstorm）中为Kendo布局组件获得了正确的建议，但是当它运行时，我没有任何布局组件。这是我在app.component.html文件中的代码：

<!--The content below is only a placeholder and can be replaced.-->
<kendo-splitter orientation="horizontal" style="height: 200px">
  <kendo-splitter-pane [collapsible]="true" size="20%"><div class="pane-content"><p>left pane</p></div></kendo-splitter-pane>
  <kendo-splitter-pane><div class="pane-content"><p>Right Pane</p></div></kendo-splitter-pane>
</kendo-splitter>
<kendo-panelbar>
  <kendo-panelbar-item [title]="'test title'"></kendo-panelbar-item>
</kendo-panelbar>
<div>

</div>
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

底部只是我尚未删除的默认Angular样板，但为了某种原因使其生效，请保留它。

到目前为止，我唯一的css是在应用程序组件中：

.pane-content{
  padding: 0 10px;
}

，这在主应用程序styles.css文件中（我确实从index.html中的Google字体导入了字体）：

/* You can add global styles to this file, and also import other style files */
body {
  font-family: 'Martel Sans', sans-serif;
}

这是我在Chrome上看到的运行内容：

它的布局就像它根本没有使用Kendo控件一样。我还尝试了使用treeview控件，并且根据他们的示例它也可以正常工作，但是这个似乎并不是出于某种原因。有人知道为什么吗？

-编辑-

在下面的注释之后，我导入了app.module.ts。这是该文件中的代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {LayoutModule, PanelBarModule, SplitterModule} from '@progress/kendo-angular-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LayoutModule,
    BrowserAnimationsModule,
    LayoutModule,
    SplitterModule,
    PanelBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

那只是因为我现在看到的是“测试标题”而不是“无标题”，所以改变了布局。靠近但仍缺少一些东西...

Answer 1

确保要在app.module.ts文件中导入适当的模块...

...    
imports: [
    BrowserModule,
    LayoutModule,
    BrowserAnimationsModule,
    LayoutModule,
    SplitterModule,
    PanelBarModule
  ],
...

Answer 2

在我以前使用Kendo的经验中，您可能还需要将CSS主题导入到您的应用程序中。没有它，kendo将不会像其网站示例那样对组件进行样式设置。

在他们的StackBlitz example之后，我看到他们链接到index.html文件上的样式表。当我删除下面的行时，拆分器组件看起来与您的编辑类似。试一试。

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />

您可以通过单击找到的“在StackBlitz中打开”链接来尝试运行代码或查看以上示例。

Kendo for Angular-布局控件不起作用

2 个答案: