feat(common): better error message when non-template element used in NgIf (#22274)
closes #16410 PR Close #22274
This commit is contained in:
		
							parent
							
								
									49082d7ab2
								
							
						
					
					
						commit
						67cf11d071
					
				| @ -6,7 +6,7 @@ | ||||
|  * found in the LICENSE file at https://angular.io/license
 | ||||
|  */ | ||||
| 
 | ||||
| import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '@angular/core'; | ||||
| import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstringify as stringify} from '@angular/core'; | ||||
| 
 | ||||
| 
 | ||||
| /** | ||||
| @ -118,6 +118,7 @@ export class NgIf { | ||||
| 
 | ||||
|   @Input() | ||||
|   set ngIfThen(templateRef: TemplateRef<NgIfContext>) { | ||||
|     assertTemplate('ngIfThen', templateRef); | ||||
|     this._thenTemplateRef = templateRef; | ||||
|     this._thenViewRef = null;  // clear previous view if any.
 | ||||
|     this._updateView(); | ||||
| @ -125,6 +126,7 @@ export class NgIf { | ||||
| 
 | ||||
|   @Input() | ||||
|   set ngIfElse(templateRef: TemplateRef<NgIfContext>) { | ||||
|     assertTemplate('ngIfElse', templateRef); | ||||
|     this._elseTemplateRef = templateRef; | ||||
|     this._elseViewRef = null;  // clear previous view if any.
 | ||||
|     this._updateView(); | ||||
| @ -163,3 +165,10 @@ export class NgIfContext { | ||||
|   public $implicit: any = null; | ||||
|   public ngIf: any = null; | ||||
| } | ||||
| 
 | ||||
| function assertTemplate(property: string, templateRef: TemplateRef<any>): void { | ||||
|   const isTemplateRef = templateRef.createEmbeddedView != null; | ||||
|   if (!isTemplateRef) { | ||||
|     throw new Error(`${property} must be a TemplateRef, but received '${stringify(templateRef)}'.`); | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -217,6 +217,28 @@ import {expect} from '@angular/platform-browser/testing/src/matchers'; | ||||
|            expect(fixture.nativeElement).toHaveText('false'); | ||||
|          })); | ||||
|     }); | ||||
| 
 | ||||
|     describe('Type guarding', () => { | ||||
|       it('should throw when then block is not template', async(() => { | ||||
|            const template = '<span *ngIf="booleanCondition; then thenBlock">IGNORE</span>' + | ||||
|                '<div #thenBlock>THEN</div>'; | ||||
| 
 | ||||
|            fixture = createTestComponent(template); | ||||
| 
 | ||||
|            expect(() => fixture.detectChanges()) | ||||
|                .toThrowError(/ngIfThen must be a TemplateRef, but received/); | ||||
|          })); | ||||
| 
 | ||||
|       it('should throw when else block is not template', async(() => { | ||||
|            const template = '<span *ngIf="booleanCondition; else elseBlock">IGNORE</span>' + | ||||
|                '<div #elseBlock>ELSE</div>'; | ||||
| 
 | ||||
|            fixture = createTestComponent(template); | ||||
| 
 | ||||
|            expect(() => fixture.detectChanges()) | ||||
|                .toThrowError(/ngIfElse must be a TemplateRef, but received/); | ||||
|          })); | ||||
|     }); | ||||
|   }); | ||||
| } | ||||
| 
 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user