Skip to content

Commit 29d3581

Browse files
HyperLife1119AndrewKushnir
HyperLife1119
authored and
AndrewKushnir
committed
feat(common): add component input binding support for NgComponentOutlet (#51148)
This commit add component input binding support for NgComponentOutlet. PR Close #51148
1 parent b5cf5d2 commit 29d3581

File tree

4 files changed

+213
-36
lines changed

4 files changed

+213
-36
lines changed

‎goldens/public-api/common/index.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,7 @@ export class NgClass implements DoCheck {
491491
}
492492

493493
// @public
494-
export class NgComponentOutlet implements OnChanges, OnDestroy {
494+
export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
495495
constructor(_viewContainerRef: ViewContainerRef);
496496
// (undocumented)
497497
ngComponentOutlet: Type<any> | null;
@@ -500,15 +500,19 @@ export class NgComponentOutlet implements OnChanges, OnDestroy {
500500
// (undocumented)
501501
ngComponentOutletInjector?: Injector;
502502
// (undocumented)
503+
ngComponentOutletInputs?: Record<string, unknown>;
504+
// (undocumented)
503505
ngComponentOutletNgModule?: Type<any>;
504506
// @deprecated (undocumented)
505507
ngComponentOutletNgModuleFactory?: NgModuleFactory<any>;
506508
// (undocumented)
509+
ngDoCheck(): void;
510+
// (undocumented)
507511
ngOnChanges(changes: SimpleChanges): void;
508512
// (undocumented)
509513
ngOnDestroy(): void;
510514
// (undocumented)
511-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": { "alias": "ngComponentOutlet"; "required": false; }; "ngComponentOutletInjector": { "alias": "ngComponentOutletInjector"; "required": false; }; "ngComponentOutletContent": { "alias": "ngComponentOutletContent"; "required": false; }; "ngComponentOutletNgModule": { "alias": "ngComponentOutletNgModule"; "required": false; }; "ngComponentOutletNgModuleFactory": { "alias": "ngComponentOutletNgModuleFactory"; "required": false; }; }, {}, never, never, true, never>;
515+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": { "alias": "ngComponentOutlet"; "required": false; }; "ngComponentOutletInputs": { "alias": "ngComponentOutletInputs"; "required": false; }; "ngComponentOutletInjector": { "alias": "ngComponentOutletInjector"; "required": false; }; "ngComponentOutletContent": { "alias": "ngComponentOutletContent"; "required": false; }; "ngComponentOutletNgModule": { "alias": "ngComponentOutletNgModule"; "required": false; }; "ngComponentOutletNgModuleFactory": { "alias": "ngComponentOutletNgModuleFactory"; "required": false; }; }, {}, never, never, true, never>;
512516
// (undocumented)
513517
static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet, never>;
514518
}

‎packages/common/src/directives/ng_component_outlet.ts‎

Lines changed: 91 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, Type, ViewContainerRef} from '@angular/core';
10-
9+
import {ComponentRef, createNgModule, Directive, DoCheck, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, Type, ViewContainerRef} from '@angular/core';
1110

1211
/**
1312
* Instantiates a {@link Component} type and inserts its Host View into the current View.
@@ -22,6 +21,9 @@ import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactor
2221
*
2322
* You can control the component creation process by using the following optional attributes:
2423
*
24+
* * `ngComponentOutletInputs`: Optional component inputs object, which will be bind to the
25+
* component.
26+
*
2527
* * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
2628
* the Component. Defaults to the injector of the current view container.
2729
*
@@ -42,6 +44,13 @@ import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactor
4244
* <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
4345
* ```
4446
*
47+
* With inputs
48+
* ```
49+
* <ng-container *ngComponentOutlet="componentTypeExpression;
50+
* inputs: inputsExpression;">
51+
* </ng-container>
52+
* ```
53+
*
4554
* Customized injector/content
4655
* ```
4756
* <ng-container *ngComponentOutlet="componentTypeExpression;
@@ -72,9 +81,10 @@ import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactor
7281
selector: '[ngComponentOutlet]',
7382
standalone: true,
7483
})
75-
export class NgComponentOutlet implements OnChanges, OnDestroy {
84+
export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
7685
@Input() ngComponentOutlet: Type<any>|null = null;
7786

87+
@Input() ngComponentOutletInputs?: Record<string, unknown>;
7888
@Input() ngComponentOutletInjector?: Injector;
7989
@Input() ngComponentOutletContent?: any[][];
8090

@@ -87,45 +97,96 @@ export class NgComponentOutlet implements OnChanges, OnDestroy {
8797
private _componentRef: ComponentRef<any>|undefined;
8898
private _moduleRef: NgModuleRef<any>|undefined;
8999

100+
/**
101+
* A helper data structure that allows us to track inputs that were part of the
102+
* ngComponentOutletInputs expression. Tracking inputs is necessary for proper removal of ones
103+
* that are no longer referenced.
104+
*/
105+
private _inputsUsed = new Map<string, boolean>();
106+
90107
constructor(private _viewContainerRef: ViewContainerRef) {}
91108

109+
private _needToReCreateNgModuleInstance(changes: SimpleChanges): boolean {
110+
// Note: square brackets property accessor is safe for Closure compiler optimizations (the
111+
// `changes` argument of the `ngOnChanges` lifecycle hook retains the names of the fields that
112+
// were changed).
113+
return changes['ngComponentOutletNgModule'] !== undefined ||
114+
changes['ngComponentOutletNgModuleFactory'] !== undefined;
115+
}
116+
117+
private _needToReCreateComponentInstance(changes: SimpleChanges): boolean {
118+
// Note: square brackets property accessor is safe for Closure compiler optimizations (the
119+
// `changes` argument of the `ngOnChanges` lifecycle hook retains the names of the fields that
120+
// were changed).
121+
return changes['ngComponentOutlet'] !== undefined ||
122+
changes['ngComponentOutletContent'] !== undefined ||
123+
changes['ngComponentOutletInjector'] !== undefined ||
124+
this._needToReCreateNgModuleInstance(changes);
125+
}
126+
92127
/** @nodoc */
93128
ngOnChanges(changes: SimpleChanges) {
94-
const {
95-
_viewContainerRef: viewContainerRef,
96-
ngComponentOutletNgModule: ngModule,
97-
ngComponentOutletNgModuleFactory: ngModuleFactory,
98-
} = this;
99-
viewContainerRef.clear();
100-
this._componentRef = undefined;
101-
102-
if (this.ngComponentOutlet) {
103-
const injector = this.ngComponentOutletInjector || viewContainerRef.parentInjector;
104-
105-
if (changes['ngComponentOutletNgModule'] || changes['ngComponentOutletNgModuleFactory']) {
106-
if (this._moduleRef) this._moduleRef.destroy();
107-
108-
if (ngModule) {
109-
this._moduleRef = createNgModule(ngModule, getParentInjector(injector));
110-
} else if (ngModuleFactory) {
111-
this._moduleRef = ngModuleFactory.create(getParentInjector(injector));
112-
} else {
113-
this._moduleRef = undefined;
129+
if (this._needToReCreateComponentInstance(changes)) {
130+
this._viewContainerRef.clear();
131+
this._inputsUsed.clear();
132+
this._componentRef = undefined;
133+
134+
if (this.ngComponentOutlet) {
135+
const injector = this.ngComponentOutletInjector || this._viewContainerRef.parentInjector;
136+
137+
if (this._needToReCreateNgModuleInstance(changes)) {
138+
this._moduleRef?.destroy();
139+
140+
if (this.ngComponentOutletNgModule) {
141+
this._moduleRef =
142+
createNgModule(this.ngComponentOutletNgModule, getParentInjector(injector));
143+
} else if (this.ngComponentOutletNgModuleFactory) {
144+
this._moduleRef =
145+
this.ngComponentOutletNgModuleFactory.create(getParentInjector(injector));
146+
} else {
147+
this._moduleRef = undefined;
148+
}
149+
}
150+
151+
this._componentRef = this._viewContainerRef.createComponent(this.ngComponentOutlet, {
152+
injector,
153+
ngModuleRef: this._moduleRef,
154+
projectableNodes: this.ngComponentOutletContent,
155+
});
156+
}
157+
}
158+
}
159+
160+
/** @nodoc */
161+
ngDoCheck() {
162+
if (this._componentRef) {
163+
if (this.ngComponentOutletInputs) {
164+
for (const inputName of Object.keys(this.ngComponentOutletInputs)) {
165+
this._inputsUsed.set(inputName, true);
114166
}
115167
}
116168

117-
this._componentRef = viewContainerRef.createComponent(this.ngComponentOutlet, {
118-
index: viewContainerRef.length,
119-
injector,
120-
ngModuleRef: this._moduleRef,
121-
projectableNodes: this.ngComponentOutletContent,
122-
});
169+
this._applyInputStateDiff(this._componentRef);
123170
}
124171
}
125172

126173
/** @nodoc */
127174
ngOnDestroy() {
128-
if (this._moduleRef) this._moduleRef.destroy();
175+
this._moduleRef?.destroy();
176+
}
177+
178+
private _applyInputStateDiff(componentRef: ComponentRef<unknown>) {
179+
for (const [inputName, touched] of this._inputsUsed) {
180+
if (!touched) {
181+
// The input that was previously active no longer exists and needs to be set to undefined.
182+
componentRef.setInput(inputName, undefined);
183+
this._inputsUsed.delete(inputName);
184+
} else {
185+
// Since touched is true, it can be asserted that the inputs object is not empty.
186+
componentRef.setInput(inputName, this.ngComponentOutletInputs![inputName]);
187+
this._inputsUsed.set(inputName, false);
188+
}
189+
}
129190
}
130191
}
131192

‎packages/common/test/directives/ng_component_outlet_spec.ts‎

Lines changed: 108 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {CommonModule} from '@angular/common';
1010
import {NgComponentOutlet} from '@angular/common/src/directives/ng_component_outlet';
11-
import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, NgModule, NgModuleFactory, NO_ERRORS_SCHEMA, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
11+
import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, Input, NgModule, NgModuleFactory, NO_ERRORS_SCHEMA, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
1212
import {TestBed, waitForAsync} from '@angular/core/testing';
1313
import {expect} from '@angular/platform-browser/testing/src/matchers';
1414

@@ -295,20 +295,92 @@ describe('insert/remove', () => {
295295
});
296296
});
297297

298+
describe('inputs', () => {
299+
it('should be binding the component input', () => {
300+
const fixture = TestBed.createComponent(TestInputsComponent);
301+
fixture.componentInstance.currentComponent = ComponentWithInputs;
302+
fixture.detectChanges();
303+
304+
expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');
305+
306+
fixture.componentInstance.inputs = {};
307+
fixture.detectChanges();
308+
309+
expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');
310+
311+
fixture.componentInstance.inputs = {foo: 'Foo', bar: 'Bar'};
312+
fixture.detectChanges();
313+
314+
expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: Bar, baz: Baz');
315+
316+
fixture.componentInstance.inputs = {foo: 'Foo'};
317+
fixture.detectChanges();
318+
319+
expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: , baz: Baz');
320+
321+
fixture.componentInstance.inputs = {foo: 'Foo', baz: null};
322+
fixture.detectChanges();
323+
324+
expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: , baz: ');
325+
326+
fixture.componentInstance.inputs = undefined;
327+
fixture.detectChanges();
328+
329+
expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: ');
330+
});
331+
332+
it('should be binding the component input (with mutable inputs)', () => {
333+
const fixture = TestBed.createComponent(TestInputsComponent);
334+
fixture.componentInstance.currentComponent = ComponentWithInputs;
335+
fixture.detectChanges();
336+
337+
expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');
338+
339+
fixture.componentInstance.inputs = {foo: 'Hello', bar: 'World'};
340+
fixture.detectChanges();
341+
342+
expect(fixture.nativeElement.textContent).toBe('foo: Hello, bar: World, baz: Baz');
343+
344+
fixture.componentInstance.inputs['bar'] = 'Angular';
345+
fixture.detectChanges();
346+
347+
expect(fixture.nativeElement.textContent).toBe('foo: Hello, bar: Angular, baz: Baz');
348+
349+
delete fixture.componentInstance.inputs['foo'];
350+
fixture.detectChanges();
351+
352+
expect(fixture.nativeElement.textContent).toBe('foo: , bar: Angular, baz: Baz');
353+
});
354+
355+
it('should be binding the component input (with component type change)', () => {
356+
const fixture = TestBed.createComponent(TestInputsComponent);
357+
fixture.componentInstance.currentComponent = ComponentWithInputs;
358+
fixture.componentInstance.inputs = {foo: 'Foo', bar: 'Bar'};
359+
fixture.detectChanges();
360+
361+
expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: Bar, baz: Baz');
362+
363+
fixture.componentInstance.currentComponent = AnotherComponentWithInputs;
364+
fixture.detectChanges();
365+
366+
expect(fixture.nativeElement.textContent).toBe('[ANOTHER] foo: Foo, bar: Bar, baz: Baz');
367+
});
368+
});
369+
298370
const TEST_TOKEN = new InjectionToken('TestToken');
299371
@Component({selector: 'injected-component', template: 'foo'})
300372
class InjectedComponent {
301373
constructor(@Optional() @Inject(TEST_TOKEN) public testToken: any) {}
302374
}
303375

304-
305376
@Component({selector: 'injected-component-again', template: 'bar'})
306377
class InjectedComponentAgain {
307378
}
308379

309380
const TEST_CMP_TEMPLATE = `<ng-template *ngComponentOutlet="
310381
currentComponent;
311382
injector: injector;
383+
inputs: inputs;
312384
content: projectables;
313385
ngModule: ngModule;
314386
ngModuleFactory: ngModuleFactory;
@@ -317,6 +389,7 @@ const TEST_CMP_TEMPLATE = `<ng-template *ngComponentOutlet="
317389
class TestComponent {
318390
currentComponent: Type<unknown>|null = null;
319391
injector?: Injector;
392+
inputs?: Record<string, unknown>;
320393
projectables?: any[][];
321394
ngModule?: Type<unknown>;
322395
ngModuleFactory?: NgModuleFactory<unknown>;
@@ -371,3 +444,36 @@ class Module3InjectedComponent {
371444
})
372445
export class TestModule3 {
373446
}
447+
448+
@Component({
449+
selector: 'cmp-with-inputs',
450+
standalone: true,
451+
template: `foo: {{ foo }}, bar: {{ bar }}, baz: {{ baz }}`
452+
})
453+
class ComponentWithInputs {
454+
@Input() foo?: any;
455+
@Input() bar?: any;
456+
@Input() baz?: any = 'Baz';
457+
}
458+
459+
@Component({
460+
selector: 'another-cmp-with-inputs',
461+
standalone: true,
462+
template: `[ANOTHER] foo: {{ foo }}, bar: {{ bar }}, baz: {{ baz }}`
463+
})
464+
class AnotherComponentWithInputs {
465+
@Input() foo?: any;
466+
@Input() bar?: any;
467+
@Input() baz?: any = 'Baz';
468+
}
469+
470+
@Component({
471+
selector: 'test-cmp',
472+
standalone: true,
473+
imports: [NgComponentOutlet],
474+
template: `<ng-template *ngComponentOutlet="currentComponent; inputs: inputs;"></ng-template>`
475+
})
476+
class TestInputsComponent {
477+
currentComponent: Type<unknown>|null = null;
478+
inputs?: Record<string, unknown>;
479+
}

‎packages/examples/common/ngComponentOutlet/ts/module.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Component, Injectable, Injector, NgModule, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
9+
import {Component, Injectable, Injector, Input, NgModule, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
1010
import {BrowserModule} from '@angular/platform-browser';
1111

1212

@@ -33,9 +33,11 @@ export class Greeter {
3333

3434
@Component({
3535
selector: 'complete-component',
36-
template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
36+
template: `{{ label }}: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
3737
})
3838
export class CompleteComponent {
39+
@Input() label!: string;
40+
3941
constructor(public greeter: Greeter) {}
4042
}
4143

@@ -45,12 +47,16 @@ export class CompleteComponent {
4547
<ng-template #ahoj>Ahoj</ng-template>
4648
<ng-template #svet>Svet</ng-template>
4749
<ng-container *ngComponentOutlet="CompleteComponent;
50+
inputs: myInputs;
4851
injector: myInjector;
4952
content: myContent"></ng-container>`
5053
})
5154
export class NgComponentOutletCompleteExample implements OnInit {
5255
// This field is necessary to expose CompleteComponent to the template.
5356
CompleteComponent = CompleteComponent;
57+
58+
myInputs = {'label': 'Complete'};
59+
5460
myInjector: Injector;
5561
@ViewChild('ahoj', {static: true}) ahojTemplateRef!: TemplateRef<any>;
5662
@ViewChild('svet', {static: true}) svetTemplateRef!: TemplateRef<any>;

0 commit comments

Comments
 (0)