如何覆盖组件的默认属性值

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 } 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, ... ], 
    ... 
})