當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript static.downgradeComponent函數代碼示例

本文整理匯總了TypeScript中@angular/upgrade/static.downgradeComponent函數的典型用法代碼示例。如果您正苦於以下問題:TypeScript downgradeComponent函數的具體用法?TypeScript downgradeComponent怎麽用?TypeScript downgradeComponent使用的例子?那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。


在下文中一共展示了downgradeComponent函數的15個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的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


注:本文中的@angular/upgrade/static.downgradeComponent函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台,相關代碼片段篩選自各路編程大神貢獻的開源項目,源碼版權歸原作者所有,傳播和使用請參考對應項目的License;未經允許,請勿轉載。