[Angular]——ng-template与ng-container搭配使用

最新推荐文章于 2024-07-15 18:57:34 发布
最新推荐文章于 2024-07-15 18:57:34 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Angular 文章标签： angular2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sungoodluck666/article/details/112428245
版权
本文介绍了Angular中ng-template和ng-container的使用。ng-template作为无视觉表现的模板容器，常用于指令的组合。而ng-container则作为一个不进入DOM的分组元素，提供动态插入内容的占位。通过配合ng-templateOutlet，可以实现父组件向子组件传递自定义组件的能力。
摘要由CSDN通过智能技术生成

ng-template

是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。

ng-template仅是用于包含一个内容的模板，使得其可以与其他的模板镶嵌组合成一个组件模板。

<ng-template #name>
	<button></button>
</ng-template>

正因为其不会显示在DOM中，所以可以将一些指令放在上边。


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  虽菜但瘾
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Angular中ng-template和ng-container的应用

				
			

			

				

					小王的技术库
				

				

					07-29
					
					2524
					
				

			

		

		

			
				
Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结。ng-template是一个Angular元素，它不会直接显示出来。在渲染视图之前，Angular会把它的内容替换为一个注释。ng-template是用来定义模板的，当定义好一个模板之后，可以用ng-container和ngTemplateOutlet指令来进行使用。简单点来说，就是定义了一个模板片段，并且起了一个名字，在需要的时候可以通过名字来使用这个片段。


作用域的Template
带作用域

			
		

	



                

              
                



	

		

			

				
					
angular ng-template

				
			

			

				

					米斯特尔曾的博客
				

				

					12-19
					
					3650
					
				

			

		

		

			
				
解释
其实和html5的template是一样的就是将模板保存到html中然后需要时再抓出来显示到指定位置
代码
import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './...

			
		

	



                


  
              

                


	

		

			

				
					
ng-container、‌ng-template 和 ng-content 区别

					
最新发布

				
			

			

				

					Future1994的博客
				

				

					07-15
					
					347
					
				

			

		

		

			
				
‌：‌：‌：‌。

			
		

	





	

		

			

				
					
angular模板加载——ng-template

				
			

			

				

					04-23
				

			

		

		

			
				
NULL
博文链接：https://bijian1013.iteye.com/blog/2257723

			
		

	



		

			
		



	

		

			

				
					
angularJS在directive的template中使用ng-template

				
			

			

				

					pkpk20044的博客
				

				

					07-26
					
					7076
					
				

			

		

		

			
				
今天为大家介绍一下在angularjs的directive中使用ng-template的方法。


1.我们的问题是什么？
var page = angular.module('ausp.directive',['ui.tree']);

page.directive('auspTree', ['$templateCache',function($templateCache) {
   r

			
		

	





	

		

			

				
					
angular中的ng-template

				
			

			

				

					erciyuan_nuonuo的博客
				

				

					11-08
					
					1295
					
				

			

		

		

			
				
http://www.jianshu.com/p/f0abac50c6b6

			
		

	





	

		

			

				
					
[Angular]——动态增加表单项

				
			

			

				

					虽菜但瘾
				

				

					09-21
					
					2377
					
				

			

		

		

			
				
动态增加表单
这个问题的环境是基于Angular10和NG-ZROOR，nz中的动态表单是有个触发机制的——点击按钮，而有时候页面的显示是不需要手动触发的。先从后台取回数据，在进行数据的渲染，这时候需要
问题描述：
提示：这里描述项目中遇到的问题：
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：
@Override
        public void run() {
            bytes = mmInStream.read(buffer);
  

			
		

	





	

		

			

				
					
[Angular实战网易云]——23、搜索组件

				
			

			

				

					虽菜但瘾
				

				

					01-10
					
					515
					
				

			

		

		

			
				
搜索组件
首页顶部的搜索框要开始实现了。使用场景很明确，就是去根据关键字去调用专用的接口拿到返回值后渲染到组件中。


为了方便维护，将搜索框封装成单独的模块
创建search模块
// 在wy-ui下执行
	ng g m wy-search
	ng g c wy-search

为了避免循环引用shareModule，所以要在WySearchModule中逐个引用。

自定义组件
使用ng-container和ng-template标签灵活创建组件渲染的内容

wy-search.component.ht

			
		

	





	

		

			

				
					
[Angular实战网易云]——10、滑块进度条

				
			

			

				

					虽菜但瘾
				

				

					12-03
					
					812
					
				

			

		

		

			
				
场景
首页主体样式大致实现，底部样式还有所欠缺，所以底部应加上个别信息与播放的进度条，这个进度条类似Zorro的滑块，点击与滑动，其中包括事件的绑定与组件的嵌套。其中进度条不仅仅实现在歌曲进度上，在音量控制上也可以复用，为了方便后期在底部添加各种功能而避免代码臃肿，将进度条分离开是最好的选择。

在app.component.html底部中添加新创建的wy-player模块路由 < app-wy-player>< /app-wy-player>

wy-player.componen

			
		

	





	

		

			

				
					
[译] angular中的ng-template, ng-content, ng-container

				
			

			

				

					qq_36205941的博客
				

				

					09-15
					
					565
					
				

			

		

		

			
				
angular中的ng-template, ng-content, ng-container

			
		

	





	

		

			

				
					
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

				
			

			

				

					10-18
				

			

		

		

			
				
ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友参考下吧

			
		

	





	

		

			

				
					
Angular模板指令：ng-template和ng-container的用法

				
			

			

				

					qq_45263913的博客
				

				

					09-22
					
					358
					
				

			

		

		

			
				
ng-template和ng-container的用法

			
		

	





	

		

			

				
					
angular中ng-container、ng-content和ng-template的用法

				
			

			

				

					李卓书
				

				

					06-05
					
					3806
					
				

			

		

		

			
				
鉴于angular中对ng-template的说明比较分散，这里专门对ng-template进行解析说明，并总结相关的几个关联性指令。说明：在官方文档中，我们一般会在哪些地方看到ng-container呢？没错，在内容投影！当然大概率也会在内置指令和模版变量中有它的身影。但是，最为经典的，还是在内容投影中的释义。
简而言之：ng-container标签的使用，不会在dom中产生标签 
举个例子：如下

比如说，我们定义一段代码，如上所示。我们把详细资料放到ng-container里面，我们看一下元素的dom

			
		

	





	

		

			

				
					
angular模板加载

				
			

			

				

					kooky博客
				

				

					09-13
					
					6454
					
				

			

		

		

			
				
angular模板加载 ----ng-template

Angularjs作为mvc（或者说mvvm)框架，同样具备模板这一基本概念。

NG加载模板的顺序为 内存加载---AJAX加载。

如果排版乱掉，请查阅 https://www.zybuluo.com/bornkiller/note/6023

内存加载

如果之前使用过Bootstrap 插件的ng版，即angul

			
		

	





	

		

			

				
					
Angular之ng-template，ng-content，ng-container，* ngTemplateOutlet

				
			

			

				

					ld_____的博客
				

				

					04-18
					
					660
					
				

			

		

		

			
				
1、<ng-template>

ng-template用来定义模板，仅在存在结构指令的情况下起作用，可以和*ngIf-else配合使用

1）IF-ELSE


<div *ngIf="isValid; else otherTpl">
  这是IF内容
</div>
<ng-template #otherTpl>这是ELSE内容</ng-template>

#otherTpl是模板引用变量，当isValid为false时，页面渲染else内容


			
		

	





	

		

			

				
					
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别

				
			

			

				

					材女的进击
				

				

					06-25
					
					729
					
				

			

		

		

			
				
除了将每个内容投影到单个 ng-content 中之外，您还可以使用 ng-content 的 select 属性控制内容的投影方式。Angular 将宿主元素（指令所应用到的元素）包装在 ng-template 中，并通过用诊断注释(diagnostic comments)替换它来使用完成的 DOM 中的 ng-template。project-content 组件的开始和结束标记中传递的 HTML 内容就是要投影的内容。内容将在提供内容投影功能组件内的 ng-content 内呈现。

			
		

	





	

		

			

				
					
Angular 中的动态模板加载 ng-template

				
			

			

				

					weixin_34255793的博客
				

				

					01-16
					
					3218
					
				

			

		

		

			
				
基本使用方法

首先在HTML的文件中引入,用来存放动态加载的组件

<ng-template #target></ng-template>
复制代码
简介相关的api


ViewChild：一个属性装饰器，用来从模板视图中获取对应的元素，可以通过模板变量获取，获取时可以通过 read 属性设置查询的条件，就是说可以把此视图转为不同的实例


ViewContainerR...

			
		

	





	

		

			

				
					
深入理解Angular ng-template：模板加载实战与应用

				
			

			

				

					
				

			

		

		

			
				
在Angular中，ng-template的使用可以简化模板结构，提高代码的可维护性和性能。它允许你将重复的UI结构定义在一个单独的模板中，然后在需要的地方通过指令`<ng-template>`引用它。这有助于减少DOM操作，特别是当需要...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值