如何扩展angular @input装饰器?

时间:2018-10-10 12:05:02

标签: angular typescript angular-cli angular-decorator

我正在尝试编写自定义属性装饰器,以扩展@Input装饰器的角度。

我的目标是使用现有的属性选择器获取Localizable属性。

./ decorators / my-decorators.ts

import {Input} from '@angular/core';
export interface InputDefinition {localizable: boolean; selector: string; }
export function MyInput(inputDefinition: InputDefinition) {
    const ngInput = Input(inputDefinition.selector);
    return function (target: any, key: string) {
        if (inputDefinition.localizable === true) {
            console.log(`loclizable input ${inputDefinition.selector}`);
            // implement localization for property.
        }
      ngInput(target, key);
    };
}

./ my-component / mycomponent.ts

import { Component, Input } from '@angular/core';
import { MyInput } from '../decorators/my-decorators';

@Component({
  selector: 'my-component',
  template: `<h1>{{myInput}}</h1>`
})
export class MyComponent {
  //define input property with custom decorator 
  @MyInput({selector: 'my-input', localizable: false})
  myInput = 'input default value';
}

./ app.component.html

<div style="text-align:center">
  <my-component my-input="bound value"></my-component>
</div>

ng serve enter image description here

似乎工作得很好,但是当我在产品模式下运行它时。.

--ng serve --prod enter image description here

没有任何构建错误或运行时错误,但是属性绑定在产品构建中不起作用。

各种建议都会有所帮助。

提前感谢

ng -version


Angular CLI: 6.2.4
Node: 8.11.1
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.4
@angular-devkit/build-angular     0.8.4
@angular-devkit/build-optimizer   0.8.4
@angular-devkit/build-webpack     0.8.4
@angular-devkit/core              0.8.4
@angular-devkit/schematics        0.8.4
@angular/cli                      6.2.4
@ngtools/webpack                  6.2.4
@schematics/angular               0.8.4
@schematics/update                0.8.4
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.20.2

0 个答案:

没有答案