[Angular 2] Set Values on Generated Angular 2 Templates with Template Context
2023-09-14 09:00:52 时间
Angular 2 templates have a special let
syntax that allows you to define and pass a context
when they’re being generated.
We have template:
<template #template let-description="description"> <h2>My {{description}} template</h2> <button>My {{description}} button</button> </template>
And we define 'description' variable to let data to pass into.
import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from "@angular/core"; import {WidgetThree} from "../widgets/widget-three.component"; @Component({ selector: 'home', template: ` <button (click)="onClick()">Create Template</button> <div #container></div> <template #template let-description="description"> <h2>My {{description}} template</h2> <button>My {{description}} button</button> </template> ` }) export class HomeComponent{ @ViewChild('container', {read:ViewContainerRef}) container; @ViewChild('template') template; constructor(){} onClick(){ this.container.createEmbeddedView(this.template, { description: 'sweet' }); } }
相关文章
- [Angular] Angular Router Extra Options - Recommended Settings
- [ngx-formly] Dynamically hide Form Controls with Angular Formly
- [ngx-formly] Dynamically set Model Properties with Angular Formly Expressions
- [Angular] Expose Angular Component Logic Using State Reducers
- [Angular] Using ngTemplateOutlet to create dynamic template
- [Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?
- [Angular 2] *ngFor
- [AngularJS] Angular 1.5 multiple transclude
- [ngx-formly] Dynamically set Model Properties with Angular Formly Expressions
- [Angular] Tree shakable provider
- [Angular] Set Metadata in HTTP Headers with Angular HttpHeaders
- [Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef
- [Angular 2] Set Properties on Dynamically Created Angular 2 Components
- [Angular + Unit] AngularJS Unit testing using Karma
- 如何根据SAP Spartacus的页面快速找到实现的Angular Component
- Angular自定义structural指令的实例化过程以及set方法的调用
- 使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
- SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
- Angular jasmine fixture.detectChanges如何触发directive的set方法
- Angular里的购物车页面实现
- Angular 应用的DevDependencies