Angular4动态创建组件--根据组件名称动态创建出来组件

最新推荐文章于 2024-08-13 19:35:02 发布
最新推荐文章于 2024-08-13 19:35:02 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： angular4 组件 文章标签： Angular4 动态创建组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaotuni/article/details/76862694
版权
本文探讨了在Angular4中动态创建组件的需求和场景，强调了期望通过组件名称即可实现组件实例化的愿望，类似于C#的动态类创建。文中通过示例展示了如何创建一个简单的文本输入弹框和更复杂的带数据绑定及事件处理的组件，并封装成通用方法。动态创建的步骤位于弹框组件内部，提供了部分关键方法的概述。
摘要由CSDN通过智能技术生成

动态创建组件

  • 说说场景先，比我写了一些组件，这此组件内容都很少，弹出的对话框也许只有一行数据，也有可能是一个表单等，或都一些多选的，单选的选项等。

  • 网上有好多，动态创建组件的Demo，都不是很满意，愿意就是要动态创建组件的时候，传入的你即将要创建的组件对象进去，然后把这个放到页面里显示出来。这算什么动态创建呀，我就想传一个组件的名字，然后就能把他创建出来。

  • 之前写过C#动态创建类，都是给一个类的名称，然后通过反射将类创建出来，然后能过接口过滤转成接口调用方法或， invoke 某个方法等进行操作。像这种才是我想要的效果。

  • 给个名称，然后就把这个组件创建出来，通过输入一些参数对创建出来的组件进行赋值，输出一些参数（主就输出是事件了，比较点击组件上的按钮触发相应的事件等）。

说了这么多，先来个例子吧。
这里写图片描述
上面那张图很简单就是一个输入文本的一个弹框。

下面这个就有点复杂了，有数据传入，事件绑定等

最低0.47元/天 解锁文章
xiaotuni
关注
专栏目录
Angular 4根据组件名称动态创建出组件的方法教程
08-28
在Angular 4中，动态创建组件是一项强大的功能，它允许我们根据组件名称在运行时创建组件实例。这对于构建可扩展的、高度灵活的应用程序非常有用，例如创建动态表单、弹出对话框或自定义视图。以下是关于Angular 4...
Angular二次封装组件参数透传
衣乌安、随笔
04-28 1127
由于Angular 组件的输入输出属性有着严格的校验，而且不允许像React组件一样支持解构来传递props,比如 <ReactComponent {...myProps}/> 只能尴尬的一个个来写对应属性，而对于二次封装一些组件的话就意味着有些Input要写两遍，封装的组件中定义一遍Input然后在使用被封装组件时在挨个赋值写一遍，很烦~所以暂时想到了一种只定义一遍的方案（更好的方案还没想到，有更好的欢迎指出），大致思路就是利用 ViewChild获取子组件（被封装的组件），将然后直接遍历对
angular动态组件容器（直接传入组件名称，自动生成组件）
qq_34486756的博客
08-03 772
angular动态组件
angular组件的制作与使用
最新发布
听海边涛声
08-13 355
angular组件的制作与使用
Angular动态创建组件
kaidi81619101的博客
02-26 1930
动态组件是指在运行时根据需要创建的组件，可以将它们添加到 DOM 中，也可以从 DOM 中移除它们。调用ViewContainerRef 的createComponent 方法，根据组件的工厂对象创建组件的实例，并将其添加到容器元素中。在创建组件实例后，我们可以设置组件的属性、订阅组件事件，并将组件插入到 DOM 中。根据需要，可以更新组件的输入属性，订阅组件的输出事件，或调用组件的方法来与组件进行交互。获取组件的工厂对象，该对象可以根据组件的类型或名称创建组件的实例。组件的组件工厂，并使用。
Angular学习笔记65：动态创建组件
W先生
10-08 770
在使用一个组件的时候。可以通过在组件的元数据的selector中设置的标签来使用。也可以动态的创建一个组件来使用。 通过在组件的元数据的 selector 中设置的标签来使用组件 以可编辑的table(EditTableComponent) 这个组件为例，这个组件的元数据中selector 设置的标签为：“app-edit-table”; 所以在其他组件中使用这个组件的时候，只需要在组件的模版文...
angular 动态组件 ComponentFactoryResolver
m0_54944506的博客
01-03 2182
当组件数量不多的话可以利用ngif来判断component 组件目录结构 模板代码 <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="radioValueChange()"> <label nz-radio nzValue="A">A</label> <label nz-radio nzValue="B">B</label> <label nz-radio nzV
详解Angular 4.x 动态创建组件
08-30
在 Angular 4.x 中，动态创建组件是一种非常有用的技术，可以根据实际情况动态生成组件。本篇文章将详细介绍如何在 Angular 4.x 中动态创建组件，并提供了一个实际的示例。 首先，我们需要定义一个组件。在本示例中...
动态创建Angular组件实现popup弹窗功能
08-29
`ViewContainerRef`提供了`createComponent`方法，可以在指定的视图容器下动态创建组件。但其限制在于，`ViewContainerRef`通常只能在指令或组件内部使用，需要预先定义一个“弹窗插座”。 为了解决这个问题，我们...
Angular组件动态加载示例.zip
11-19
5. **动态创建组件**: 在组件的类中注入`ViewContainerRef`和`ComponentFactoryResolver`，然后使用它们来创建和插入组件实例。 ```typescript import { Component, ViewChild, ViewContainerRef } from '@angular/...
Angular中动态创建组件
一路斜阳的专栏
03-23 1894
动态创建组件 通常来说组件不需要动态来创建，因为直接在模板中使用可以满足大部分的需求。可是如果有这样的需求 模板中存在多个组件是否显示依赖特定的条件，那么就需要定义多个bool类型的变量来控制，而且还需要考虑bool类型变量 的修改，这样操作起来比较繁琐。这个时候可以考虑使用动态创建组件的方式。大致流程如下所示。 创建组件 @Component({ template: `<span&gt...
Angular 动态添加 Tab 标签
02-24
通过使用 ComponentFactoryResolver 来动态加载组件，实现 Angular 动态添加 Tab 标签。
angular新版本动态创建组件
m0_54944506的博客
11-17 626
【代码】angular新版本动态创建组件。
详解Angular动态组件
08-26 1397
使用场景 我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，向后台请求结果）确定在某些地方加载某些组件，这些组件不是静态的（不是固定的）。 官网的举例就是，构建动态广告条，广告组件不断会推出新的，再用只支持静态组件结构的模板显然是不现实的。 再举一个常见的例子，动态弹出框，弹出的组件是不确定的、不断更新的，这里那里弹出个购买框，那那那又需要弹出样式选择框，静态组件结构模板是不能满足群众日渐增长的需求。 怎么实现 然后我们来找个把手，看实
angular中动态创建组件
lvxinaidou的博客
09-01 616
1.文件目录 2.核心代码 app.component.html <h1 #msgContainer>我是Container</h1> <button (click)="createComponent()">创建组件</button> <!-- <h1>我是Container 2</h1> <ng-template #msgContainer></ng-template> <button (cli
angular学习总结十——动态创建组件并实现交互一
米斯特尔曾的博客
10-24 3722
angular2、angular4动态组件，Input，Output
angular4系列之动态创建组件
欣欣博客
12-10 3103
Angular如何在组件中动态加载组件
Angular实现灵活的动态创建组件指令
FlyWine的博客
09-23 951
Angular实现灵活的动态创建组件指令 在某些场景下需要动态创建指令，但是不想每次都要写很多重复的代码，那么封装一个灵活的指令是比较好的方式。 本文代码库已经在github上 ngx-dyncmp stackblitz示例连接 最终目标 设计之前需要设想需要做成什么样子，支持哪些特性，下面是基本的特性： 支持Input装饰器属性绑定，用于父组件向子组件传递值。 支持Output装饰器属性绑定，用于父组件感知子组件的变化。 支持各种组件类型的动态创建 最终使用形式如： <ng-container
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值