TypeScript core.Component函數代碼示例

const createComponentFromTemplate = (template: string): Function => {
  const componentClass = class DynamicComponent {};

  return Component({
    template: template,
  })(componentClass);
};

var IconComponent = (function () {
    function IconComponent() {
        this.vAlign = 'center';
        this.hAlign = 'center';
        this.fontSize = "16px";
    }
    Object.defineProperty(IconComponent.prototype, "charName", {
        get: function () {
            return String.fromCharCode(iconList_1.iconList[this.iconName]);
        },
        enumerable: true,
        configurable: true
    });
    __decorate([
        core_1.Input('name'), 
        __metadata('design:type', Number)
    ], IconComponent.prototype, "iconName", void 0);
    __decorate([
        core_1.Input('vertical-align'), 
        __metadata('design:type', Object)
    ], IconComponent.prototype, "vAlign", void 0);
    __decorate([
        core_1.Input('horizontal-align'), 
        __metadata('design:type', Object)
    ], IconComponent.prototype, "hAlign", void 0);
    IconComponent = __decorate([
        core_1.Component({
            selector: 'Icon',
            template: "<Label style=\"font-size:{{fontSize}};horizontal-align:{{hAlign}};vertical-align:{{vAlign}};font-family:fontawesome\" [text]=\"charName\" ></Label>"
        }), 
        __metadata('design:paramtypes', [])
    ], IconComponent);
    return IconComponent;
}());

  createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
    // Define component to create
    const cmpClass =  class DynamicComponent {};

    // Define component and metadata(ie @Component())
    const decoratedCmp = Component(metadata)(cmpClass);

    // Return ComponentFactory to create components with
    return resolver.resolveComponent(decoratedCmp);
  }

export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
    const cmpClass = class DynamicComponentA {
        login(modelValue: any): Observable<boolean> | boolean {
            console.log("dynamicLoginComponent:" + JSON.stringify(modelValue));
            return false;
        }
    };
    const decoratedCmp = Component(metadata)(cmpClass);
    return resolver.resolveComponent(decoratedCmp);
}

  return <T extends Manifest, Instance>(target: T & (new (...args: any[]) => {
    [P in keyof Instance]: Instance[P]
  })) => {
    ensureName(target);
    const componentOptions = (
      typeof styleOrOptions !== 'string' && styleOrOptions ||
      typeof styleOrOptions === 'string' && options || {}
    ) as ComponentOptions & {
      template: string, styles?: string[], selector: string
    };

    componentOptions.selector = kebabCase(target.name, 'Component');
    componentOptions.styles = typeof styleOrOptions === 'string' && [styleOrOptions] || undefined;
    componentOptions.template = template;
    return Component(componentOptions)(target);
  };

 // a component template for testing other components, by full html template
 test_comp_html(tmplt, cls, obs_pars = {}, static_pars = {}, outputs = {}) {
   let cmp = class {
     constructor() {
       for (let k in obs_pars) this[k] = new BehaviorSubject(obs_pars[k]);
       for (let k in static_pars) this[k] = static_pars[k];
       for (let k in outputs) this[k] = outputs[k];
     }
   };
   Reflect.decorate([Component({
     // selector: 'test',
     directives: [cls],
     template: tmplt,
   })], cmp);
   Reflect.decorate([ViewChild(cls)], cmp.prototype, 'comp');
   return cmp;
 }

export function createDynamicComponent(resolver: ComponentResolver, metadata: ComponentMetadata, context: any = {}): Promise<ComponentFactory<any>> {
    const cmpClass = class dynamicComponent {
        constructor() {
            if ('dynamicOnInit' in this) {
                (this as any)['dynamicOnInit'](this);
            }
        }
    };
    (cmpClass.prototype as any)['dynamicOnInit'] = (self: any) => {
        Object.keys(context).forEach(key => {
            self[key] = context[key];
        });
    };
    const decoratedCmp = Component(metadata)(cmpClass);
    return resolver.resolveComponent(decoratedCmp as Type);
}

export function MockComponent(options: Component): Component {
  const metadata: Component = {
    selector: options.selector,
    template: options.template || '',
    inputs: options.inputs,
    outputs: options.outputs || [],
    exportAs: options.exportAs || '',
  };

  class Mock {}

  metadata.outputs.forEach(method => {
    Mock.prototype[method] = new EventEmitter<any>();
  });

  return Component(metadata)(Mock as any);
}

export function MockComponent(options: Component, spies: string[] = []) {
  let metadata: Component = {
    selector: options.selector,
    template: options.template || '',
    inputs: options.inputs,
    outputs: options.outputs
  };
  let component = class _ {};
  if (options.outputs) {
    for (let output of options.outputs) {
      component.prototype[output] = new EventEmitter<any>();
    }
  }
  for (let spy of spies) {
    component.prototype[spy] = jasmine.createSpy(spy);
  }
  return Component(metadata)(component);
}

export function createComponentFactory(compiler: Compiler,
                                       metadata: Component):
                                              Promise<ComponentFactory<any>> {
    const cmpClass = class DynamicComponent {};
    const decoratedCmp = Component(metadata)(cmpClass);

    @NgModule({ 
        imports: [ CommonModule ], 
        declarations: [decoratedCmp],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ] })
    class DynamicHtmlModule { }

    return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
       .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => 
                {
                    return moduleWithComponentFactory.componentFactories.find
                                ((x) => x.componentType === decoratedCmp);
                });
}