Question

我在整个应用程序中使用Angular 2的Kendo UI NumericTextBox组件。有许多属性我一直设置为相同的值。有没有办法在应用程序和/或组件级别更改默认属性值？

以下是我当前代码的简化示例：

@Component({
  selector: 'my-app',
  template: `
    <kendo-numerictextbox
      [autoCorrect]="ns.autoCorrect"
      [min]="ns.min"
      [max]="ns.max"
      [value]="value1"
    ></kendo-numerictextbox>
    <kendo-numerictextbox
      [autoCorrect]="ns.autoCorrect"
      [min]="ns.min"
      [max]="ns.max"
      [value]="value2"
    ></kendo-numerictextbox>
  `
})

class AppComponent {
  public ns: {
    autoCorrect: true,
    min: 0,
    max: 99
  };

  public value1 = 5;
  public value2 = 10;
}

我希望有这样的东西：

@Component({
  selector: 'my-app',
  template: `
    <kendo-numerictextbox
      [value]="value1"
    ></kendo-numerictextbox>
    <kendo-numerictextbox
      [value]="value2"
    ></kendo-numerictextbox>
  `
})

class AppComponent {
  // Override existing NumericTextBoxComponent default values
  NumericTextBoxComponent.autoCorrect = true;
  NumericTextBoxComponent.min = 0;
  NumericTextBoxComponent.max = 99;

  public value1 = 5;
  public value2 = 10;
}

Answer 1

您可以将数字文本框嵌入到自己的组件中，并在那里管理默认属性。

http://plnkr.co/edit/fwpeRK779thpsv5WJJuj?p=preview

基本上，您的新组件将如下所示：

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

@Component({
    selector: 'textboxWrapper',
    template: `<kendo-numerictextbox
  [autoCorrect]="true"
  [min]="0"
  [max]="99"
  [value]="value"
></kendo-numerictextbox>`
})
export class NumericTextBoxWrapper  {
    @Input() protected value: string;
    constructor() {
    }
}

然后，将其包含在模块的模板中，如下所示：

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


@Component({
    selector: 'my-app',
    template: `
        <textboxWrapper [value]="1"></textboxWrapper>
        <textboxWrapper [value]="2"></textboxWrapper>
        <textboxWrapper [value]="3"></textboxWrapper>
    `
})

export class AppComponent {
}

另外，不要忘记将新组件的声明添加到app.module文件中：

import { NumericTextBoxWrapper } from './wrapper.component';
...
@NgModule({
  declarations: [ NumericTextBoxWrapper, ... ],
  ...
})

如何覆盖组件默认属性值

1 个答案: