[Angular] Create dynamic content with <tempalte>
Angular with gt lt create Dynamic content
2023-09-14 09:00:52 时间
To create a dynamic template, we need to a entry component as a placeholder. Then we can use entry component to create a new Tamplete into it.
import { Component, TemplateRef, ComponentRef, ViewContainerRef, ViewChild, AfterContentInit, ComponentFactoryResolver } from '@angular/core'; import { AuthFormComponent } from './auth-form/auth-form.component'; import { User } from './auth-form/auth-form.interface'; @Component({ selector: 'app-root', template: ` <div> <div #entry></div> <template #tmpl let-obj let-location="location"> <details> <summary>{{obj.name}}</summary> <p> - Age: {{obj.age}}</p> <p> - Address :{{location}}</p> </details> </template> </div> ` }) export class AppComponent implements AfterContentInit { @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef; @ViewChild('tmpl') tmpl: TemplateRef<any> ngAfterContentInit() { this.entry.createEmbeddedView(this.tmpl, { $implicit: { name: 'Zhentian', age: 27 }, location: 'China' }) } }
As we can see, we defined:
let-obj let-location="location"
let-obj: because nothing is assigned to 'let-obj', it means it will show all the $implicit value we defined in when we 'createEmbeddedView' as a second arguement.
If we open dev tools, we can see there is a '<div></div>' placeholder was created and the template we created is actually not inject into the placeholder div block, it is below placeholder.
相关文章
- angular子组件传值到父组件_vue子组件传值给父组件
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- 前端面试题angular_Vue前端面试题
- Angular Universal Application 应该处理 HTTP POST 请求吗?
- 【Angular教程】-组件初识|8月更文挑战
- Angular 应用如何回退到之前曾经浏览过的页面
- 关于 Angular 应用对浏览器 Back 按钮支持问题的讨论
- 关于 Angular 开发时对主流浏览器支持的话题
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 项目路径添加指定的访问前缀
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- Angular 项目中 angular.json builder 字段的可选项介绍
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- 备受 Vue、Angular 和 React 青睐的 Signals 演进史
- ORA-39322: Cannot use transportable tablespace with TIMESTAMP WITH TIME ZONE columns and different time zone version. ORACLE 报错 故障修复 远程处理
- Angular和jQuery的区别
- Angular 6.0 即将发布 承诺更小更快更易用
- Oracle 中的 WITH 语句使用技巧(oracle with用法)