feat(compiler): allow ngIf to use the ngIf expression directly as a guard

Allows a directive to use the expression passed directly to a property
as a guard instead of filtering the type through a type expression.

This more accurately matches the intent of the ngIf usage of its template
enabling better type inference.

Moved NgIf to using this type of guard instead of a function guard.

Closes: #20967
This commit is contained in:
Chuck Jazdzewski
2017-12-12 14:20:12 -08:00
committed by Alex Rickabaugh
parent e48f477477
commit 82bcd83566
6 changed files with 330 additions and 10 deletions

View File

@ -58,6 +58,7 @@ export class TypeCheckCompiler {
interface GuardExpression {
guard: StaticSymbol;
useIf: boolean;
expression: Expression;
}
@ -127,8 +128,12 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
for (let input of directive.inputs) {
const guard = directive.directive.guards[input.directiveName];
if (guard) {
result.push(
{guard, expression: {context: this.component, value: input.value} as Expression});
const useIf = guard === 'UseIf';
result.push({
guard,
useIf,
expression: {context: this.component, value: input.value} as Expression
});
}
}
}
@ -178,8 +183,9 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
nameResolver, o.variable(this.getOutputVar(context)), value, bindingId,
BindingForm.TrySimple);
if (stmts.length == 0) {
const callGuard = this.ctx.importExpr(guard.guard).callFn([currValExpr]);
guardExpression = guardExpression ? guardExpression.and(callGuard) : callGuard;
const guardClause =
guard.useIf ? currValExpr : this.ctx.importExpr(guard.guard).callFn([currValExpr]);
guardExpression = guardExpression ? guardExpression.and(guardClause) : guardClause;
}
}
if (guardExpression) {