Spec-Zone.ru › Angular 2

UpgradeAdapter

Stable Class

Обзор класса

class UpgradeAdapter {
  constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions)
  
  
  downgradeNg2Component(type: Type<any>) : Function
  upgradeNg1Component(name: string) : Type<any>
  registerForNg1Tests(modules?: string[]) : UpgradeAdapterRef
  bootstrap(element: Element, modules?: any[], config?:IAngularBootstrapConfig) : UpgradeAdapterRef
  upgradeNg1Provider(name: string, options?: {asToken: any})
  downgradeNg2Provider(token: any) : Function
}

Описание класса

Используйте UpgradeAdapter для совместного использования Angular 1 и Angular 2+ в одном приложении.

Этот UpgradeAdapter позволяет:

  1. создать компонент Angular 2+ из директивы компонента Angular 1 (см. [UpgradeAdapter#upgradeNg1Component()])
  2. создать директиву Angular 1 из компонента Angular 2+ (см. [UpgradeAdapter#downgradeNg2Component()])
  3. инициализацию гибридного приложения Angular, содержащего оба фреймворка, работающих совместно в одном приложении.

Мысленная модель

При размышлении о том, как работает гибридное приложение, полезно иметь мысленную модель, описывающую происходящее и объясняющую, что происходит на самом низком уровне.

  1. В одном приложении работают два независимых фреймворка, каждый из которых рассматривает другой как «черный ящик».
  2. Каждый элемент DOM на странице принадлежит ровно одному фреймворку. Фреймворк, который инициализировал элемент, является владельцем. Каждый фреймворк обновляет/взаимодействует только со своими собственными элементами DOM и игнорирует другие.
  3. Директивы Angular 1 всегда выполняются внутри кодовой базы фреймворка Angular 1, независимо от места их инициализации.
  4. Компоненты Angular 2+ всегда выполняются внутри кодовой базы фреймворка Angular 2+, независимо от места их инициализации.
  5. Компонент Angular 1 можно модернизировать в компонент Angular 2+. Это создаёт директиву Angular 2+, которая инициализирует директиву компонента Angular 1 в этом месте.
  6. Компонент Angular 2+ можно понизить до директивы компонента Angular 1. Это создаёт директиву Angular 1, которая инициализирует компонент Angular 2+ в этом месте.
  7. При каждом создании компонента адаптера элемент-хост принадлежит фреймворку, который выполняет инициализацию. Затем другой фреймворк инициализирует и владеет представлением для этого компонента. Это подразумевает, что привязки компонентов всегда будут следовать семантике фреймворка, выполнившего инициализацию. Синтаксис всегда будет синтаксисом Angular 2+.
  8. Angular 1 всегда инициализируется в первую очередь и владеет самым нижним представлением.
  9. Новое приложение работает в зоне Angular 2+ и, следовательно, больше не нуждается в вызовах $apply().

Пример

const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module), myCompilerOptions);
const module = angular.module('myExample', []);
module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2Component));

module.directive('ng1Hello', function() {
  return {
     scope: { title: '=' },
     template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
  };
});


@Component({
  selector: 'ng2-comp',
  inputs: ['name'],
  template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
  directives:
})
class Ng2Component {
}

@NgModule({
  declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
  imports: [BrowserModule]
})
class MyNg2Module {}


document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual(
      "ng2[ng1[Hello World!](transclude)](project)");
});

Конструктор

constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions)

Подробности класса

downgradeNg2Component(type: Type<any>) : Function

Позволяет использовать компонент Angular 2+ из Angular 1.

Используйте downgradeNg2Component для создания фабрики определения директивы Angular 1 из компонента Angular 2+. Адаптер инициализирует компонент Angular 2+ внутри шаблона Angular 1.

Мысленная модель

  1. Компонент инициализируется, будучи указанным в шаблоне Angular 1. Это означает, что элемент-хост контролируется Angular 1, но представление компонента будет контролироваться Angular 2+.
  2. Несмотря на то, что компонент инициализируется в Angular 1, он будет использовать синтаксис Angular 2+. Это необходимо, так как компоненты Angular 2+ не объявляют, как следует интерпретировать атрибуты.

Поддерживаемые функции

  • Привязки:
    • Атрибут: <comp name="World">
    • Интерполяция: <comp greeting="Hello {{name}}!">
    • Выражение: <comp [name]="username">
    • Событие: <comp (close)="doSomething()">
  • Проектирование содержимого: да
const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
const module = angular.module('myExample', []);
module.directive('greet', adapter.downgradeNg2Component(Greeter));

@Component({
  selector: 'greet',
  template: '{{salutation}} {{name}}! - <ng-content></ng-content>'
})
class Greeter {
  @Input() salutation: string;
  @Input() name: string;
}

@NgModule({
  declarations: [Greeter],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML =
  'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual("ng1 template: Hello world! - text");
});

upgradeNg1Component(name: string) : Type<any>

Позволяет использовать компонент Angular 1 из Angular 2+.

Используйте upgradeNg1Component для создания компонента Angular 2+ из директивы компонента Angular 1. Адаптер инициализирует компонент Angular 1 внутри шаблона Angular 2+.

Мысленная модель

  1. Компонент инициализируется, будучи указанным в шаблоне Angular 2+. Это означает, что элемент-хост контролируется Angular 2+, но представление компонента будет контролироваться Angular 1.

Поддерживаемые функции

  • Привязки:
    • Атрибут: <comp name="World">
    • Интерполяция: <comp greeting="Hello {{name}}!">
    • Выражение: <comp [name]="username">
    • Событие: <comp (close)="doSomething()">
  • Вставка: да
  • Поддерживается лишь часть функций из объекта определения директивы:
    • compile: не поддерживается, так как элемент-хост принадлежит Angular 2+, который не позволяет изменять структуру DOM во время компиляции.
    • controller: поддерживается. (ПРИМЕЧАНИЕ: инъекция $attrs и $transclude не поддерживается.)
    • controllerAs: поддерживается.
    • bindToController: поддерживается.
    • link: поддерживается. (ПРИМЕЧАНИЕ: поддерживается только функция pre-link.)
    • name: поддерживается.
    • priority: игнорируется.
    • replace: не поддерживается.
    • require: поддерживается.
    • restrict: должно быть установлено в 'E'.
    • scope: поддерживается.
    • template: поддерживается.
    • templateUrl: поддерживается.
    • terminal: игнорируется.
    • transclude: поддерживается.
const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
const module = angular.module('myExample', []);

module.directive('greet', function() {
  return {
    scope: {salutation: '=', name: '=' },
    template: '{{salutation}} {{name}}! - <span ng-transclude></span>'
  };
});

module.directive('ng2', adapter.downgradeNg2Component(Ng2Component));

@Component({
  selector: 'ng2',
  template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
})
class Ng2Component {
}

@NgModule({
  declarations: [Ng2Component, adapter.upgradeNg1Component('greet')],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML = '<ng2></ng2>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual("ng2 template: Hello world! - text");
});

registerForNg1Tests(modules?: string[]) : UpgradeAdapterRef

Регистрирует модуль обновления Angular 1 адаптера для тестирования в Angular 1. Используйте его вместо angular.mock.module() для загрузки модуля обновления в инжектор тестирования Angular 1.

const upgradeAdapter = new UpgradeAdapter(MyNg2Module);

// configure the adapter with upgrade/downgrade components and services
upgradeAdapter.downgradeNg2Component(MyComponent);

let upgradeAdapterRef: UpgradeAdapterRef;
let $compile, $rootScope;

// We must register the adapter before any calls to `inject()`
beforeEach(() => {
  upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['heroApp']);
});

beforeEach(inject((_$compile_, _$rootScope_) => {
  $compile = _$compile_;
  $rootScope = _$rootScope_;
}));

it("says hello", (done) => {
  upgradeAdapterRef.ready(() => {
    const element = $compile("<my-component></my-component>")($rootScope);
    $rootScope.$apply();
    expect(element.html()).toContain("Hello World");
    done();
  })
});


bootstrap(element: Element, modules?: any[], config?:IAngularBootstrapConfig) : UpgradeAdapterRef

Инициализирует гибридное приложение Angular 1 / Angular 2+.

Этот bootstrap метод является прямым заменителем (принимает те же аргументы) метода Angular 1 bootstrap. В отличие от Angular 1, эта инициализация асинхронная.

const adapter = new UpgradeAdapter(MyNg2Module);
const module = angular.module('myExample', []);
module.directive('ng2', adapter.downgradeNg2Component(Ng2));

module.directive('ng1', function() {
  return {
     scope: { title: '=' },
     template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
  };
});


@Component({
  selector: 'ng2',
  inputs: ['name'],
  template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
})
class Ng2 {
}

@NgModule({
  declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML = '<ng2 name="World">project</ng2>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual(
      "ng2[ng1[Hello World!](transclude)](project)");
});

upgradeNg1Provider(name: string, options?: {asToken: any})

Позволяет получить доступ к сервису Angular 1 из Angular 2+.

class Login { ... }
class Server { ... }

@Injectable()
class Example {
  constructor(@Inject('server') server, login: Login) {
    ...
  }
}

const module = angular.module('myExample', []);
module.service('server', Server);
module.service('login', Login);

const adapter = new UpgradeAdapter(MyNg2Module);
adapter.upgradeNg1Provider('server');
adapter.upgradeNg1Provider('login', {asToken: Login});

adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
  const example: Example = ref.ng2Injector.get(Example);
});


downgradeNg2Provider(token: any) : Function

Позволяет получить доступ к сервису Angular 2+ из Angular 1.

class Example {
}

const adapter = new UpgradeAdapter(MyNg2Module);

const module = angular.module('myExample', []);
module.factory('example', adapter.downgradeNg2Provider(Example));

adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
  const example: Example = ref.ng1Injector.get('example');
});

экспортировано из @angular/upgrade/index, определено в @angular/upgrade/src/upgrade_adapter.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/api/upgrade/index/UpgradeAdapter-class.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API