Quiero admitir la siguiente micro sintaxis:
foo$ | async as xyzEjemplo:
<p *appVar="foo$ | async as xyz"> Value is {{ xyz }}! </p>Ese flujo se define como
$foo = of('some value')Aquí está mi directiva:
@Directive({ selector: '[appVar]' }) export class VarDirective<T> { @Input() appVar: T; constructor( private templateRef: TemplateRef<T>, private viewContainer: ViewContainerRef ) {} ngOnInit(): void { this.viewContainer.createEmbeddedView(this.templateRef); } } Ahora, haga lo que haga, esa variable xyz siempre está indefinida.
Si creo un contexto (que se sugiere en esta publicación)
const context = { $implicit: this.appVar }; this.viewContainer.createEmbeddedView(this.templateRef, context);Obtengo el mismo resultado. ¿Alguna sugerencia de lo que hago mal aquí?
La expresión debe estar disponible en el contexto con el mismo nombre que la propia directiva, que en este caso es appVar :
this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: this.appVar, appVar: this.appVar }); Compárelo con la directiva ngIf :
@Input() set ngIf(condition: any) { this._context.$implicit = this._context.ngIf = condition; this._updateView(); } y al TuiLetContext :
get $implicit(): T { return this.internalDirectiveInstance.tuiLet; } get tuiLet(): T { return this.internalDirectiveInstance.tuiLet; }La única forma que conozco es usar "let" y no "as". Algo como
@Input() appVar ngOnInit(): void { this.viewContainer.createEmbeddedView(this.templateRef, {$implicit:this.appVar}); }Y use
<p *appVar="foo$ | async;let data"> Value is {{ data}}! </p>Pero siento que no es lo que buscas :(