Angular8:对同一组件使用不同的模板
Angular是一种流行的前端开发框架，它提供了丰富的功能和工具，使开发人员能够构建高效、灵活和可维护的 Web 应用程序。Angular8是Angular框架的一个版本，它引入了一些新的特性和改进。
在Angular中，一个组件通常由一个模板（template）、一个组件类（component class）和一个样式表（styles）组成。模板定义了组件的结构和布局，组件类则包含了组件的逻辑和数据，样式表用于定义组件的外观和样式。
对于同一组件使用不同的模板，可以通过使用条件语句或动态加载模板的方式来实现。下面是一种可能的实现方式：
- 使用条件语句：在组件类中定义一个变量，根据该变量的不同取值来选择不同的模板。在模板中使用条件语句（如ngIf或ngSwitch）根据变量的值来决定要渲染的内容。这样，在不同的情况下，组件会根据条件选择不同的模板进行渲染。
- 动态加载模板：Angular提供了动态组件加载的功能，可以在运行时根据条件动态加载不同的模板。这可以通过使用ComponentFactoryResolver和ViewContainerRef来实现。首先，创建不同的模板，并将它们注册为动态组件。然后，在组件类中根据条件选择要加载的动态组件，并使用ComponentFactoryResolver创建组件实例，并将其插入到指定的视图容器中。
这样，对于同一组件使用不同的模板，可以根据具体的业务需求和场景选择合适的实现方式。
对于Angular8的相关资源和腾讯云产品推荐，可以参考以下内容：
- Angular官方网站：https://angular.io/
- Angular8官方文档：https://angular.io/docs
- 腾讯云Serverless Framework：https://cloud.tencent.com/product/scf
- 腾讯云云函数SCF：https://cloud.tencent.com/product/scf
- 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
相关·内容
我在Angular中有一个场景，需要为相同的组件ts文件使用不同的HTML模板，如下所示 let templateUrl: string;}) 但这并不像预期的那样工作，而不是使用模板，而只是在视图中呈现模板路径
浏览 31提问于2019-10-14得票数 0
1回答
我在Angular8中使用Angular8进行复数转换，以便从组件中向用户显示通知，但是在附加到DOM之前，我无法获得模板的完整内部HTML，因为上下文还没有绑定。我如何呈现一个模板及其上下文，并为此目的获取它的内部HTML？
我尝试使用ViewContainerRef来呈现模板并将其附加到DOM中，它运行良好，但我不想在DOM上附加一些东西，以后再读取它。', { static: false }) pri
浏览 2提问于2019-11-03得票数 2
回答已采纳
我已经成功地将formio API集成到了angular项目中，并且在angular8 UI中显示了我在formio中创建的表单。我还在同一页面上实现了语言翻译，它工作得很好。尝试集成formio离线插件，对如何在angular8版本中注册离线插件有什么建议？
引用：，但无法找到angular8脱机实现的详细信息
浏览 1提问于2020-02-12得票数 1
我对Angular和使用Angular8是个新手。 当我为一个项目设置路线时，我很困惑如何使用 模板中的routerLink和.ts文件中的this.route.navigate()。const translatedPath= `/blog/${id}`; }// 它们的工作方式有何不同
浏览 89提问于2020-04-20得票数 1
回答已采纳
我在一个angular 8应用程序上工作，当用户点击一个按钮时，它应该重定向到一个供应商门户网站，这是一个完全不同的webapp (不同的Url)，当用户重定向到供应商页面，用户应该看到相同的页眉，页脚和导航所以我的问题是，我能否将我的角度页眉、页脚、导航(导航由一些单点登录逻辑组成)转换成节点模块，并让我的供应商在他们的angularJS(1.x)应用程序中使用它们？如果我们不能在angularJS (1.x)中<
浏览 0提问于2021-05-21得票数 0
我在一个angular 8应用程序上工作，当用户点击一个按钮时，它应该重定向到一个供应商门户网站，这是一个完全不同的webapp (不同的Url)，当用户重定向到供应商页面，用户应该看到相同的页眉，页脚和导航，我在我的web应用程序。但是供应商的应用程序是在angularJS(1.x)上。
所以我的问题是，我们是否可以将Angular8项目/组件转换为独立的JS文件，并要求供应商在其应用程
浏览 1提问于2021-05-26得票数 1
在我的组件中，我使用ViewChildren获得了它的标记模板的列表：在Angular8中，我无法通过Id对它们进行筛选，因此我需要查找内部属性--这在某种程度上有点麻烦：
let template = this.我检查了这个对象，发现了一个新的“黑客
浏览 20提问于2020-02-12得票数 4
回答已采纳
我怎样才能理解什么时候使用ng-template而不是角度上的组件？<ul></ul>
我面临的一个问题是，我有上面的UI，我想在组件中的几个地方使用它。但是，我希望为
浏览 0提问于2018-08-08得票数 4
回答已采纳
1回答
我在angular8中有两个组件。1) add-files component 2) Discussion Component.，我想调用在add-files组件中定义的函数removedoc()。我导入了讨论组件中的add-files组件，并创建了一个相同的对象，然后从讨论组件向add-files组件调用函数。我在互联网上做了一些研究，发现我们可以通过event emitters的@input&#
浏览 1提问于2020-02-17得票数 0
我们可以在同一个应用程序中运行不同版本的angular吗？例如:同一应用程序中的Angular 8和Angular 6。我知道角度加载在根div中。我的想法是在2个不同的根div中加载2 angular。例如:在index.html文件中，我们有： <div id = "angular8">
浏览 0提问于2020-03-12得票数 0
当我通过cmd (ng g组件测试)创建组件时，它将为该特定测试组件创建.css .html和.ts文件。那么，是否有任何方法从一个组件呈现两个或多个模板？
浏览 1提问于2018-02-06得票数 0
2回答
我有一个具有这种模板变量名的角组件。在*ngFor中，以便生成的任何组件都有不同的变量名。我需要将整个变量(不是字符串，作为对模板变量的引用)传递给在同一个*ngfor中绑定的按钮事件中的函数，如下所示现在，我不能这样通过它(click)="
浏览 4提问于2020-01-10得票数 2
回答已采纳
我是Angular8的新手。<evt-bibliography-item *ngFor="let biblCit of biblCits"
biblField="从子组件读取单个接口时会出现问题，该子组件考虑数组undefined的所有元素。this.biblFiel
浏览 3提问于2020-01-08得票数 1
回答已采纳
我使用的是FlowRouter，在中写着：
所以，如果可能的话，使用一些布局是个好主意。问题：，因为我在控制台中没有任何错误:当我用我所有的模板组件声明一个布局，并且每个路由只设置我需要的布局时，这是好的还是坏的做法？
浏览 2提问于2016-04-10得票数 0
2回答
到目前为止，我非常积极的角度，我喜欢它的工作方式，但我不知道如何解决以下问题，是相当容易解决在.NET Razor。我所有的组件，通过路由器插座，都是LayoutModule的子组件.此模块包含具有实际侧边栏和顶部栏(基本引导管理模板)的视图。我想要实现的是，每个子组件/页面都有不同的侧边栏内容。在Razor中，我可以简单地在主模板中定义一个节，并且在每个视图中，
浏览 0提问于2019-08-21得票数 0
回答已采纳
2回答
将角4升级为角8
、、
如何将我的应用程序升级到角4到角8？我是否需要做一个新的角8应用程序，复制粘贴每个组件，并相应地改变或有任何其他合适的方法？
浏览 3提问于2020-01-19得票数 2
回答已采纳
1回答
我的应用程序有三个组件：
一种web应用程序，它为另一组用户(“用户组2")提供移动设备访问涉及电子表格数据的不同功能集的功能模板页(理想情况下，对用户隐藏)，应用程序可以使用它来根据需要以编程方式生成额外的工作表。我想将所有组件作为一个附加组件
浏览 4提问于2017-11-04得票数 0
回答已采纳
2回答
运行特定模块的ng测试
、、、
我有一个相当大的Angular8应用程序来运行单元测试，我希望ng测试命令只对指定/所需模块中的所有spec.ts文件运行测试，而不是对整个代码库中的所有spec.ts文件运行测试。我尝试在test.ts文件路径中指定模块名，但是它在终端中抛出模块没有发现错误，但是在test.ts文件中指定特定的组件名会运行单个组件的测试，但对模块不起作用。谢谢
浏览 0提问于2019-11-09得票数 1
回答已采纳
我正在使用Angular8作为我的前端项目，我进入了一个情况，我需要使用不同的谷歌字体每角路线。一个可能的解决方案是导入项目中所需的所有谷歌字体，方法是在head部分导入这些字体，并在组件CSS文件中导入font-family。但缺点是，我需要下载所有的谷歌字体不必要地在我的第一个应用程序加载。
有人能建议一种方法来在每条路径上加载一个google字体吗？
浏览 2提问于2019-11-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
