如何覆蓋組件的默認屬性值

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