Как переопределить значения свойств по умолчанию компонента

Question

Я использую компонент Kendo UI NumericTextBox для Angular 2 во всем приложении. Существует ряд свойств, которые я сохраняю при одинаковом значении. Есть ли способ изменить значения свойств по умолчанию на уровне приложения и/или компонента?

Вот упрощенный пример моего текущего кода:

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