标签: kendo-ui-angular2

可以导入Directive吗Component？我想避免导入ngModule.declarations.

我正在遵循Telerik Angular Grid 的 CustomDirective。建议使用 customDirective 填充网格，但我只需要在一个组件中使用此指令，因此我想避免在 ngModule 中导入，以避免名称冲突。

编辑：
我尝试过viewProviders，但不起作用。这是有效的 plunkr（在 ngModule 中导入的指令）：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这是 plunkr ，它不起作用。（在组件中导入的指令）：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html',
  viewProviders: [HighlightDirective] …

我正在尝试实现具有行重新排序功能的 Kendo-Grid，如此处所宣传的。

当网格处理通过 Ajax 调用获取的数据时，行的重新排序（即拖放行）在视图更改之前不起作用（例如：直到用户单击本示例中分页中的第二页） ）

下面是我的 app.component.ts 文件

import { State, process } from '@progress/kendo-data-query';
import { Component, Renderer2, NgZone, AfterViewInit, OnInit, EventEmitter, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';
import { HttpClient, HttpParams} from '@angular/common/http';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
            [data]="gridData"
            [height]="410"
            [pageable]="true"
            [skip]="state.skip"
            [pageSize]="state.take"
            (dataStateChange)="dataStateChange($event)">
            <kendo-grid-column field="id" title="ID" width="60">
            </kendo-grid-column>
            <kendo-grid-column field="title" title="To Do">
            </kendo-grid-column>
            <kendo-grid-column field="completed" title="Completed" width="60">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input …

在我们的应用程序中,出于性能原因,我们更喜欢所有UI组件的"按推"策略.(changeDetection:ChangeDetectionStrategy.OnPush)我们正在考虑将Kendo用于一些UI组件(主要是网格,但也包括其他一些组件),然后我们发现我们不知道Kendo在内部做了什么.它是使用默认还是推送更改检测？

我正在尝试创建自定义对话框服务。为此，我创建了一个对话服务：

import {DialogService,DialogRef,DialogCloseResult } from '@progress/kendo-angular-dialog';  
import {Injectable} from "@angular/core";  
import {CustomComponent} from './custom.component'; 

@Injectable()
 export class DialogoService {
     constructor(private dialogService: DialogService) { }
     public confirm(title: string, content?: string): DialogRef {
      return  this.dialogService.open({
              title: title,
          content: CustomComponent ,//This is my component that holds the template
          actions: [
                    {text: 'Yes', primary: true},
                    {text: 'No'}
                   ]
               });
            } }

这是我的自定义组件

import {Component} from '@angular/core';

@Component({
    moduleId : module.id,
    selector: 'customcomponent',
    templateUrl: './custom.component.html'
})

export class CustomComponent {
    content : string ;
} …

我有一个使用Kendo Angular Grid控件的Angular 4.10应用程序.我正在使用外部编辑.我创建了FormGroup,如下所示:

        this.editForm = new FormGroup({
        'Id': new FormControl({ value: 0, disabled: true }),
        'Name': new FormControl("", Validators.compose([Validators.required, Validators.maxLength(30)])),
        'BlindName': new FormControl({ value: "" }, Validators.compose([Validators.required, Validators.maxLength(30)])),
        'UnitText': new FormControl(0),
        'IsFromBsp': new FormControl(true),
        'Disabled': new FormControl(false),
        'SortOrder': new FormControl(0, Validators.compose([Validators.required, Validators.pattern('\\d')]))
    });

我想要做的是根据值IsFromBsp为BlindName字段设置禁用状态.就像是:

'BlindName': new FormControl({ value: "", disabled: this.IsFromBsp }, Validators.compose([Validators.required, Validators.maxLength(30)])),

有没有办法实现这个目标？请告诉我.谢谢

是否有可能写出可重用的ng-template？我的很多组件使用完全相同ng-template.
例如:

<kendo-grid>
    <kendo-grid-column field="group">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
            <kendo-dropdownlist #listGroups [data]="groups"
                                textField="title"
                                valueField="id"
                                [valuePrimitive]="true"
                                [filterable]="true"
                                [formControl]="form.get('groupId')">
            </kendo-dropdownlist>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

我不想在我的所有组件中重复这个模板和逻辑.我可以编写自定义组件并将此代码缩小为:

<kendo-grid>
    <kendo-grid-column field="group">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
            <my-custom-component [formControl]="form.get('groupId')">
            </my-custom-component>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

但我想做更多:

<kendo-grid>
    <kendo-grid-column field="group">
        <ng-template [ngTemplateOutlet]="templateFromAnotherSource">
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

我发现这个线程和这个描述ngTemplateOutlet,而不是如何共享多个组件之间的模板.

我在angular 4应用程序中实现基本路由,并在浏览器上加载应用程序时出现以下错误.我在approuting.module中定义了路由,也引用了Ngmodule中的路由器模块以及approuting.module.不确定是什么问题

Can't bind to 'routerLink' since it isn't a known property of 'a'.

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ew" [hidden]="!dataItem.isVisibleView">
                                                        <a [ERROR ->][routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-fil"): ng:///MovieModule/MovieComponent.html@85:59
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("it" [hidden]="!dataItem.isVisibleEdit">
                                                        <a [ERROR ->][routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidd"): ng:///MovieModule/MovieComponent.html@92:59

以下是我的申请的源代码

movie.component.html中的kendo网格片段

  </kendo-grid-column>
                                             <kendo-grid-column title="View" headerClass="kendoGridHeader" class="kendoGridControlCell">
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="View" [hidden]="!dataItem.isVisibleView">
                                                        <a [routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-file-text" …

基本上我需要做的是让全选复选框也选择尚未“滚动到”的所有虚拟行。这样的事情可能吗？

下面是我一直在玩的Telerik 演示中的示例之一的 stackblitz 链接：

https://stackblitz.com/edit/angular-2e4uik

现在单击“全选”只会选择前 10 行，因为这就是网格的“页面大小”设置的内容。

我正在尝试在我的多语言应用程序中使用 Kendo 组件。为了正确设置日期格式，Kendo 需要LOCALE_ID设置 Angular 的 。我不知道如何以干净的方式实现这一点。

目前，我正在使用 来HTTP_ACCEPT_LANGUAGE查找应该使用哪种语言来提供我的应用程序。我在nginx.conf中这样做：

# Parse AcceptLanguage header
  # en,es,pl,fr
  # en,es;q=0.8,pl;q=0.7,fr;q=0.6
  set $first_language $http_accept_language;
  if ($http_accept_language ~* '^(.+?),') {
    set $first_language $1;
  }

  set $language_suffix 'en';
  if ($first_language ~* 'fr') {
    set $language_suffix 'fr';
  }

  root /usr/share/nginx/html/$language_suffix;

这有效。使用正确的 .xlf 文件并且消息显示为已翻译。

现在，我需要设置LOCALE_ID以使我的 Kendo 组件以正确的格式呈现日期。我尝试通过获取浏览器当前语言来设置它。以下是我尝试实现这一目标的方法：

应用程序模块.ts

...
import { LOCALE_ID, NgModule } from '@angular/core';
import { LocaleService } from './shared/service/locale.service';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [ …

我想@types/kendo-ui在我的项目中导入。但即使是 WebStorm 也没有为我提供自动导入功能。

Kendo-UI 库已经通过加载，<script />所以我不需要通过import '@progress/kendo-ui';.

我安装了包https://www.npmjs.com/package/@types/kendo-ui通过npm install --save @types/kendo-ui。

我试图通过这种可能性导入，但没有任何效果。

1. /// <reference path="@types/kendo-ui" />

结果： TS2503：找不到命名空间“kendo”。

2. import kendo = require("kendo");

结果： TS1202：针对 ECMAScript 模块时无法使用导入分配。

3. declare module 'kendo' { export = kendo; }

结果： TS2664：扩充中的模块名称无效，找不到模块“kendo”。

4. import { kendo } from '@types/kendo-ui';

结果： TS2307：找不到模块“@types/kendo-ui”。

5. import * as kendo from '@types/kendo-ui';

结果： TS6137：无法导入类型声明文件。考虑导入 'kendo-ui' 而不是 '@types/kendo-ui'。

这就是我想使用它的方式。

<kendo.ui.Editor>kendo.jQuery(this.element.nativeElement).kendoEditor({
  tools: []
});

这就是它现在的工作方式，但没有自动完成。

declare var kendo: any;
<any>kendo.jQuery(this.element.nativeElement).kendoEditor({
  tools: []
});

我想尽可能地使用这些类型，所以不使用 …