feat(upgrade): use ComponentFactory.inputs/outputs/ngContentSelectors

DEPRECATION:
- the arguments `inputs` / `outputs` / `ngContentSelectors` of `downgradeComponent`
  are no longer used as Angular calculates these automatically now.
- Compiler.getNgContentSelectors is deprecated. Use
  ComponentFactory.ngContentSelectors instead.
This commit is contained in:
Tobias Bosch
2017-03-14 14:55:37 -07:00
committed by Chuck Jazdzewski
parent 1171f91a80
commit a3e32fb7e1
22 changed files with 94 additions and 418 deletions

View File

@ -73,7 +73,7 @@ export function main() {
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']);
expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
});
}));

View File

@ -72,16 +72,14 @@ export function main() {
ngDoBootstrap() {}
}
const ng1Module =
angular.module('ng1', [])
.directive(
'ng2', downgradeComponent({component: Ng2Component, inputs: ['itemId']}))
.run(($rootScope: angular.IRootScopeService) => {
$rootScope['items'] = [
{id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
{id: 'c', subitems: [7, 8, 9]}
];
});
const ng1Module = angular.module('ng1', [])
.directive('ng2', downgradeComponent({component: Ng2Component}))
.run(($rootScope: angular.IRootScopeService) => {
$rootScope['items'] = [
{id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
{id: 'c', subitems: [7, 8, 9]}
];
});
const element = html(`
<ng2 ng-repeat="item in items" [item-id]="item.id">
@ -162,7 +160,7 @@ export function main() {
}
const ng1Module = angular.module('ng1', []).directive(
'ng2', downgradeComponent({component: Ng2Component, selectors: ['.ng1a', '.ng1b']}));
'ng2', downgradeComponent({component: Ng2Component}));
// The ng-if on one of the projected children is here to make sure
// the correct slot is targeted even with structural directives in play.

View File

@ -108,15 +108,9 @@ export function main() {
};
}
ng1Module.directive(
'ng2', downgradeComponent({
component: Ng2Component,
inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
outputs: [
'eventA', 'eventB', 'twoWayAEmitter: twoWayAChange',
'twoWayBEmitter: twoWayBChange'
]
}));
ng1Module.directive('ng2', downgradeComponent({
component: Ng2Component,
}));
@NgModule({
declarations: [Ng2Component],

View File

@ -71,9 +71,7 @@ export function main() {
};
})
// This is wrapping (downgrading) an Angular component to be used in AngularJS
.directive(
'ng2',
downgradeComponent({component: Ng2Component, inputs: ['nameProp: name']}));
.directive('ng2', downgradeComponent({component: Ng2Component}));
// This is the (AngularJS) application bootstrap element
// Notice that it is actually a downgraded Angular component

View File

@ -2627,12 +2627,10 @@ export function main() {
}
// Define `ng1Module`
const ng1Module =
angular.module('ng1Module', [])
.directive('ng1A', () => ng1DirectiveA)
.directive('ng1B', () => ng1DirectiveB)
.directive(
'ng2', downgradeComponent({component: Ng2Component, inputs: ['show']}));
const ng1Module = angular.module('ng1Module', [])
.directive('ng1A', () => ng1DirectiveA)
.directive('ng1B', () => ng1DirectiveB)
.directive('ng2', downgradeComponent({component: Ng2Component}));
// Define `Ng2Module`
@NgModule({
@ -2729,12 +2727,10 @@ export function main() {
}
// Define `ng1Module`
const ng1Module =
angular.module('ng1Module', [])
.directive('ng1A', () => ng1DirectiveA)
.directive('ng1B', () => ng1DirectiveB)
.directive(
'ng2', downgradeComponent({component: Ng2Component, inputs: ['show']}));
const ng1Module = angular.module('ng1Module', [])
.directive('ng1A', () => ng1DirectiveA)
.directive('ng1B', () => ng1DirectiveB)
.directive('ng2', downgradeComponent({component: Ng2Component}));
// Define `Ng2Module`
@NgModule({
@ -3086,11 +3082,7 @@ export function main() {
const ng1Module = angular.module('ng1', [])
.component('ng1X', ng1Component)
.directive('ng2A', downgradeComponent({component: Ng2ComponentA}))
.directive('ng2B', downgradeComponent({
component: Ng2ComponentB,
inputs: ['ng2BInputA: ng2BInput1', 'ng2BInputC'],
outputs: ['ng2BOutputC']
}));
.directive('ng2B', downgradeComponent({component: Ng2ComponentB}));
// Define `Ng2Module`
@NgModule({