• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript static.downgradeComponent函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中@angular/upgrade/static.downgradeComponent函数的典型用法代码示例。如果您正苦于以下问题:TypeScript downgradeComponent函数的具体用法?TypeScript downgradeComponent怎么用?TypeScript downgradeComponent使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了downgradeComponent函数的20个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: it

    it('should instantiate ng2 in ng1 template and project content', async(() => {

         // the ng2 component that will be used in ng1 (downgraded)
         @Component({selector: 'ng2', template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
         class Ng2Component {
         }

         // our upgrade module to host the component to downgrade
         @NgModule({
           imports: [BrowserModule, UpgradeModule],
           declarations: [Ng2Component],
           entryComponents: [Ng2Component]
         })
         class Ng2Module {
           ngDoBootstrap() {}
         }

         // the ng1 app module that will consume the downgraded component
         const ng1Module = angular
                               .module('ng1', [])
                               // create an ng1 facade of the ng2 component
                               .directive('ng2', downgradeComponent({component: Ng2Component}));

         const element =
             html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');

         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
           expect(document.body.textContent).toEqual('ng1[NG2(~ng-content~)]');
         });
       }));
开发者ID:AlmogShaul,项目名称:angular,代码行数:30,代码来源:content_projection_spec.ts


示例2: it

    it('should verify UpgradeAdapter example', async(() => {

         // This is wrapping (upgrading) an AngularJS component to be used in an Angular
         // component
         @Directive({selector: 'ng1'})
         class Ng1Component extends UpgradeComponent {
           @Input() title: string;

           constructor(elementRef: ElementRef, injector: Injector) {
             super('ng1', elementRef, injector);
           }
         }

         // This is an Angular component that will be downgraded
         @Component({
           selector: 'ng2',
           template: 'ng2[<ng1 [title]="nameProp">transclude</ng1>](<ng-content></ng-content>)'
         })
         class Ng2Component {
           @Input('name') nameProp: string;
         }

         // This module represents the Angular pieces of the application
         @NgModule({
           declarations: [Ng1Component, Ng2Component],
           entryComponents: [Ng2Component],
           imports: [BrowserModule, UpgradeModule]
         })
         class Ng2Module {
           ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */
           }
         }

         // This module represents the AngularJS pieces of the application
         const ng1Module =
             angular
                 .module('myExample', [])
                 // This is an AngularJS component that will be upgraded
                 .directive(
                     'ng1',
                     () => {
                       return {
                         scope: {title: '='},
                         transclude: true,
                         template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
                       };
                     })
                 // This is wrapping (downgrading) an Angular component to be used in AngularJS
                 .directive('ng2', downgradeComponent({component: Ng2Component}));

         // This is the (AngularJS) application bootstrap element
         // Notice that it is actually a downgraded Angular component
         const element = html('<ng2 name="World">project</ng2>');

         // Let's use a helper function to make this simpler
         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
           expect(multiTrim(element.textContent))
               .toBe('ng2[ng1[Hello World!](transclude)](project)');
         });
       }));
开发者ID:asself,项目名称:angular,代码行数:60,代码来源:examples_spec.ts


示例3: it

    it('should interleave scope and component expressions', async(() => {
         const log: any[] /** TODO #9100 */ = [];
         const l = (value: any /** TODO #9100 */) => {
           log.push(value);
           return value + ';';
         };

         @Directive({selector: 'ng1a'})
         class Ng1aComponent extends UpgradeComponent {
           constructor(elementRef: ElementRef, injector: Injector) {
             super('ng1a', elementRef, injector);
           }
         }

         @Directive({selector: 'ng1b'})
         class Ng1bComponent extends UpgradeComponent {
           constructor(elementRef: ElementRef, injector: Injector) {
             super('ng1b', elementRef, injector);
           }
         }

         @Component({
           selector: 'ng2',
           template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
         })
         class Ng2Component {
           l: (value: any) => string;
           constructor() { this.l = l; }
         }

         @NgModule({
           declarations: [Ng1aComponent, Ng1bComponent, Ng2Component],
           entryComponents: [Ng2Component],
           imports: [BrowserModule, UpgradeModule]
         })
         class Ng2Module {
           ngDoBootstrap() {}
         }

         const ng1Module = angular.module('ng1', [])
                               .directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}))
                               .directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}))
                               .directive('ng2', downgradeComponent({component: Ng2Component}))
                               .run(($rootScope: any /** TODO #9100 */) => {
                                 $rootScope.l = l;
                                 $rootScope.reset = () => log.length = 0;
                               });

         const element =
             html('<div>{{reset(); l(\'1A\');}}<ng2>{{l(\'1B\')}}</ng2>{{l(\'1C\')}}</div>');
         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
           expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;');
           // https://github.com/angular/angular.js/issues/12983
           expect(log).toEqual(['1A', '1B', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
         });
       }));
开发者ID:AlmogShaul,项目名称:angular,代码行数:56,代码来源:change_detection_spec.ts


示例4: downgrade

export function downgrade(component: any): void {
  const { selector, inputs, outputs } = extractMetadata(component);

  if (!selector) {
    throw new Error(`Angular component *selector* missing for @Downgrade()! (${component.name})`);
  }

  createModule(component)
    .directive(toCamel(selector), downgradeComponent({ component, inputs, outputs }));
}
开发者ID:csvn,项目名称:ng-esm,代码行数:10,代码来源:upgrade.ts


示例5: it

    it('should propagate changes to a downgraded component inside the ngZone', async(() => {
         let appComponent: AppComponent;

         @Component({selector: 'my-app', template: '<my-child [value]="value"></my-child>'})
         class AppComponent {
           value: number;
           constructor() { appComponent = this; }
         }

         @Component({
           selector: 'my-child',
           template: '<div>{{valueFromPromise}}',
         })
         class ChildComponent {
           valueFromPromise: number;
           @Input()
           set value(v: number) { expect(NgZone.isInAngularZone()).toBe(true); }

           constructor(private zone: NgZone) {}

           ngOnChanges(changes: SimpleChanges) {
             if (changes['value'].isFirstChange()) return;

             this.zone.onMicrotaskEmpty.subscribe(
                 () => { expect(element.textContent).toEqual('5'); });

             Promise.resolve().then(() => this.valueFromPromise = changes['value'].currentValue);
           }
         }

         @NgModule({
           declarations: [AppComponent, ChildComponent],
           entryComponents: [AppComponent],
           imports: [BrowserModule, UpgradeModule]
         })
         class Ng2Module {
           ngDoBootstrap() {}
         }

         const ng1Module = angular.module('ng1', []).directive(
             'myApp', downgradeComponent({component: AppComponent}));


         const element = html('<my-app></my-app>');

         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
           appComponent.value = 5;
         });
       }));
开发者ID:JohnnyQQQQ,项目名称:angular,代码行数:49,代码来源:change_detection_spec.ts


示例6: platformBrowserDynamic

export const downgradeModuleFactory = (ngModule) => {
    const boostrapFn = (extraProviders: StaticProvider[]) => {
        const platformRef = platformBrowserDynamic(extraProviders);
        return platformRef.bootstrapModule(ngModule);
    };
    const downgradedModule = downgradeModule(boostrapFn);

    angular
        .module(downgradedModule)
        .directive('serviceBootstrap', downgradeComponent({component: ServiceBootstrapComponent}))
        .run(['$compile', '$rootScope', ($compile: ng.ICompileService, $root: ng.IRootScopeService) => {
            $compile('<service-bootstrap></service-bootstrap>')($root);
        }]);

    return downgradedModule;
};
开发者ID:gridgain,项目名称:gridgain,代码行数:16,代码来源:downgrade.ts


示例7: downgradeComponent

SPINNAKER_COMPONENT_DOWNGRADES.forEach((item) => {
  DOWNGRADED_COMPONENT_MODULE_NAMES.push(item.moduleName);
  declarations.push(item.moduleClass);

  // ng2 AoT requires we specify the inputs/outputs for downgraded components because the metadata is lost at runtime
  const component: any = {
    component: item.moduleClass
  };
  if (item.inputs) {
    component.inputs = item.inputs;
  }
  if (item.outputs) {
    component.outputs = item.outputs;
  }

  angular.module(item.moduleName, []).directive(item.injectionName, downgradeComponent(component) as ng.IDirectiveFactory);
});
开发者ID:jtk54,项目名称:deck,代码行数:17,代码来源:app.module.ts


示例8: ngDoBootstrap

  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [
    HeroDetailComponent
  ],
  entryComponents: [
    HeroDetailComponent
  ]
})
export class AppModule {
  ngDoBootstrap() {}
}
// #docregion downgradecomponent

angular.module('heroApp', [])
  .controller('MainController', MainController)
  .directive('heroDetail', downgradeComponent({
    component: HeroDetailComponent,
    inputs: ['hero'],
    outputs: ['deleted']
  }) as angular.IDirectiveFactory);

// #enddocregion downgradecomponent

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
});
开发者ID:JohnnyQQQQ,项目名称:angular,代码行数:30,代码来源:app.module.ts


示例9: constructor

import { HeroDetailComponent } from './hero-detail.component';

// #enddocregion downgradecomponent
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [
    HeroDetailComponent
  ],
  entryComponents: [
    HeroDetailComponent
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}
// #docregion downgradecomponent

angular.module('heroApp', [])
  .controller('MainController', MainController)
  .directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory);

// #enddocregion downgradecomponent

platformBrowserDynamic().bootstrapModule(AppModule);
开发者ID:AnthonyPAlicea,项目名称:angular,代码行数:30,代码来源:app.module.ts


示例10: downgradeInjectable

  // angular 1 app services
  .service('lMenuService', MenuService)
  .service('lLineItemService', LineItemService)
  .service('lOrderService', OrderService)
  .service('lBasketService', BasketService)
  .service('lUserService', UserService)
  .service('lToastService', ToastService)
  .service('lPriceService', PriceService)
  .factory('router', downgradeInjectable(RouterWrapper))
  .factory('configService', downgradeInjectable(ConfigService))

  // angular 1 app filters
  .filter('lDate', DateFilter)

  // angular 2 app components to be used in angular 1 app
  .directive('lApp', downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory)
  .directive('lExample', downgradeComponent({component: ExampleComponent}) as angular.IDirectiveFactory)
  .directive('lFlashMessage', downgradeComponent({component: FlashMessageComponent}) as angular.IDirectiveFactory)
  .directive('lPastDaysSwitcher', downgradeComponent({
    component: PastDaysSwitcherComponent,
    inputs: ['switched'],
    outputs: ['switch']
  }) as angular.IDirectiveFactory)
  .directive('lMenuCover', downgradeComponent({
    component: MenuCoverComponent,
    inputs: ['url']
  }) as angular.IDirectiveFactory)
  ;

开发者ID:lunches-platform,项目名称:fe,代码行数:28,代码来源:app.module.ts


示例11: downgradeComponent

import {downgradeComponent} from "@angular/upgrade/static";
import * as angular from "angular";

import {moduleName} from "../module-name";
import {NotificationMenuComponent} from "./notification-menu.component";

angular.module(moduleName)
    .directive("notificationMenu", downgradeComponent({component: NotificationMenuComponent}) as angular.IDirectiveFactory);
开发者ID:prashanthc97,项目名称:kylo,代码行数:8,代码来源:angular1.ts


示例12: downgradeComponent

distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import angular from 'angularjs-for-webpack';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {downgradeComponent} from '@angular/upgrade/static';

import {tsCountEvents} from './count-events.directive';
import {tsTimelinesList} from './timelines.directive';
import {tsSavedViewList, tsSearchTemplateList} from './views.directive';
import {NavigationComponent} from './navigation.component';

export const tsSketchModule = angular.module('timesketch.sketch', [])
  .directive('tsCountEvents', tsCountEvents)
  .directive('tsTimelinesList', tsTimelinesList)
  .directive('tsSavedViewList', tsSavedViewList)
  .directive('tsSearchTemplateList', tsSearchTemplateList)
  .directive('tsSketchNavigation', downgradeComponent({
      component: NavigationComponent, propagateDigest: false,
  }));

@NgModule({
  imports: [CommonModule],
  declarations: [NavigationComponent],
  entryComponents: [NavigationComponent],
})
export class SketchModule {}
开发者ID:Onager,项目名称:timesketch,代码行数:30,代码来源:sketch.module.ts


示例13: downgradeComponent

import {ReactiveFormsModule} from '@angular/forms';
import {downgradeComponent} from '@angular/upgrade/static';

import {CytoscapeComponent} from './cytoscape.component';
import {CypherQueryComponent} from './cypher-query.component';
import {CypherFormComponent} from './cypher-form.component';
import {GraphViewComponent} from './graph-view.component';
import {SidebarComponent} from './sidebar.component';
import {EventListComponent} from './event-list.component';
import {EventComponent} from './event.component';
import {MainComponent} from './main.component';
import {ApiModule} from '../api/api.module';

export const tsGraphModule = angular.module('timesketch.graphs', [])
  .directive('tsGraphsMain', downgradeComponent({
      component: MainComponent, propagateDigest: false,
  }));

@NgModule({
  imports: [CommonModule, FormsModule, ApiModule, ReactiveFormsModule],
  declarations: [
      CytoscapeComponent,
      CypherQueryComponent,
      CypherFormComponent,
      GraphViewComponent,
      SidebarComponent,
      EventListComponent,
      EventComponent,
      MainComponent,
  ],
  entryComponents: [MainComponent],
开发者ID:Onager,项目名称:timesketch,代码行数:31,代码来源:graph.module.ts


示例14: constructor

import * as angular from 'angular';

@Component({
  selector: 'import-export',
  templateUrl: "./import.export.component.html",
  styleUrls: []

})
class ImportExportComponent {

  @Input()
  protected db: string;

  constructor(private dbService: DBService) {
  }

  exportDatabase() {

    this.dbService.exportDB(this.db);

  }
}


angular.module('dbconfig.components', []).directive(
  `importExport`,
  downgradeComponent({component: ImportExportComponent, inputs: ["db"]}));

export  {ImportExportComponent};
开发者ID:orientechnologies,项目名称:orientdb-studio,代码行数:29,代码来源:importexport.component.ts


示例15: constructor

@Component({
  selector: 'scheduler',
  templateUrl: "./scheduler.component.html",
  styleUrls: []
})

class SchedulerComponent {

  constructor(private notification: NotificationService, private agentService: AgentService) {

    // agent
    // this.agentService.isActive().then(() => {
    //   this.init();
    // });

  }

  init() {

  }


}

angular.module('scheduler.components', []).directive(
  `scheduler`,
  downgradeComponent({component: SchedulerComponent}));


export {SchedulerComponent};
开发者ID:orientechnologies,项目名称:orientdb-studio,代码行数:30,代码来源:scheduler.component.ts


示例16: constructor

import { downgradeComponent } from '@angular/upgrade/static';
import { Component } from '@angular/core';

import { Phone, PhoneData } from '../core/phone/phone.service';
import { RouteParams } from '../ajs-upgraded-providers';

@Component({
  templateUrl: 'phone-detail.template.html',
})
export class PhoneDetailComponent {
  phone: PhoneData;
  mainImageUrl: string;

  constructor(routeParams: RouteParams, phone: Phone) {
    phone.get(routeParams['phoneId']).subscribe(phone => {
      this.phone = phone;
      this.setImage(phone.images[0]);
    });
  }

  setImage(imageUrl: string) {
    this.mainImageUrl = imageUrl;
  }
}

angular.module('phoneDetail')
  .directive(
    'phoneDetail',
    downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory
  );
开发者ID:SangKa,项目名称:angular-cn,代码行数:30,代码来源:phone-detail.component.ts


示例17: ngDoBootstrap

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';

import { RootDirective } from './myApp';
import { Ng2Component } from './ng2';
import { Ng1Directive, Ng1Component } from './ng1';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [
    Ng2Component,
    Ng1Component,
  ],
  entryComponents: [
    Ng2Component
  ]
})
export class AppModule {
  ngDoBootstrap() {}
}

angular.module('upgradeApp', [])
  .directive('ng1', Ng1Directive)
  .directive('ng2', downgradeComponent({
    component: Ng2Component,
  }) as angular.IDirectiveFactory)
  .directive('myApp', RootDirective);
开发者ID:DylanLacey,项目名称:protractor,代码行数:30,代码来源:module.ts


示例18: constructor

  ],
  declarations: [
    AppComponent,
    RepoComponent
  ],
  entryComponents: [
    AppComponent,
    RepoComponent
  ]
})

export class AppModule { 
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
  }
}

/*
 * Downgrading component 
 */
angular.module('myApp')
  .directive(
    'appComponent',
    downgradeComponent({ component: AppComponent }) as angular.IDirectiveFactory
  )
  .directive(
    'repoComponent',
    downgradeComponent({component: RepoComponent}) as angular.IDirectiveFactory
  );
  
开发者ID:renecardozo,项目名称:hybrid_angularjs_angular,代码行数:30,代码来源:app.module.ts


示例19: sortPhones

        let snippet = phone.snippet.toLowerCase();
        return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0;
      });
    }
    return phones;
  }

  private sortPhones(phones: PhoneData[]) {
    if (phones && this.orderProp) {
      return phones
        .slice(0) // Make a copy
        .sort((a, b) => {
          if (a[this.orderProp] < b[this.orderProp]) {
            return -1;
          } else if ([b[this.orderProp] < a[this.orderProp]]) {
            return 1;
          } else {
            return 0;
          }
        });
    }
    return phones;
  }
}

angular.module('phoneList')
  .directive(
    'phoneList',
    downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory
  );
开发者ID:diestrin,项目名称:angular,代码行数:30,代码来源:phone-list.component.ts


示例20: downgradeComponent

import { SdcUiComponentsModule } from './index';
import { downgradeComponent, downgradeInjectable } from "@angular/upgrade/static";
import * as Components from './components';
declare const angular: any;

let SdcUiComponentsNg1Module = null;

if (typeof angular !== "undefined") {

    SdcUiComponentsNg1Module = angular.module('SdcUiComponentsNg1', []);

    // // Form Elements
    SdcUiComponentsNg1Module.directive('sdcInput', downgradeComponent({
        component: Components.InputComponent,
        inputs: ['label', 'value', 'pattern', 'disabled', 'placeHolder', 'required', 'minLength', 'maxLength', 'debounceTime'],
        outputs: ['valueChange']
    }));
    SdcUiComponentsNg1Module.directive('sdcDropdown', downgradeComponent({
        component: Components.DropDownComponent,
        inputs: ['label', 'options', 'disabled', 'placeHolder', 'required', 'validate', 'headless', 'maxHeight', 'selectedOption'],
        outputs: ['changeEmitter']
    }));
    SdcUiComponentsNg1Module.directive('sdcCheckbox', downgradeComponent({
        component: Components.CheckboxComponent,
        inputs: ['label', 'checked', 'disabled'],
        outputs: ['checkedChange']
    }));
    SdcUiComponentsNg1Module.directive('sdcRadioGroup', downgradeComponent({
        component: Components.RadioGroupComponent,
        inputs: ['legend', 'options', 'disabled', 'value', 'direction'],
        outputs: ['valueChange']
开发者ID:onap-sdc,项目名称:sdc-ui,代码行数:31,代码来源:ng1.module.ts



注:本文中的@angular/upgrade/static.downgradeComponent函数示例整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap