feat(language-service): specific suggestions for template context diags (#34751)

This commit elaborates diagnostics produced for invalid template
contexts by including the name of the embedded template type using the
template context, and in the common case that the implicity property is
being referenced (e.g. in a `for .. of ..` expression), suggesting to
refine the type of the context. This suggestion is provided because
users will sometimes use a base class as the type of the context in the
embedded view, and a more specific context later on (e.g. in an
`ngOnChanges` method).

Closes https://github.com/angular/vscode-ng-language-service/issues/251

PR Close #34751
This commit is contained in:
ayazhafiz
2020-01-12 14:15:50 -08:00
committed by Andrew Kushnir
parent 6a4186c017
commit cc7fca4dc1
4 changed files with 55 additions and 13 deletions

View File

@ -33,6 +33,7 @@ import * as ParsingCases from './parsing-cases';
ParsingCases.CaseIncompleteOpen,
ParsingCases.CaseMissingClosing,
ParsingCases.CaseUnknown,
ParsingCases.CounterDirective,
ParsingCases.EmptyInterpolation,
ParsingCases.HintModel,
ParsingCases.NoValueAttribute,

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Component, Directive, EventEmitter, Input, Output} from '@angular/core';
import {Component, Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
import {Hero} from './app.component';
@ -109,6 +109,24 @@ export class AsyncForUsingComponent {
export class References {
}
class CounterDirectiveContext<T> {
constructor(public $implicit: T) {}
}
@Directive({selector: '[counterOf]'})
export class CounterDirective implements OnChanges {
// Object does not have an "$implicit" property.
constructor(private container: ViewContainerRef, private template: TemplateRef<Object>) {}
@Input('counterOf') counter: number = 0;
ngOnChanges(_changes: SimpleChanges) {
this.container.clear();
for (let i = 0; i < this.counter; ++i) {
this.container.createEmbeddedView(this.template, new CounterDirectiveContext<number>(i + 1));
}
}
}
/**
* This Component provides the `test-comp` selector.
*/