针对ViewContainerRef，ViewRef和TemplateRef的延伸<ng-template>和<ng-container>

最新推荐文章于 2022-11-07 15:14:41 发布
最新推荐文章于 2022-11-07 15:14:41 发布
阅读量334 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/2949632/blog/1525439
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最近学习NG-ZORRO组件看到以下写法

<ng-template [ngTemplateOutlet]="_contentTpl || defaultContent"></ng-template>

我项目开发中平时都是直接写一个组件去作为模态框显示，没用过类似的模板植入。有必要记录一下最近的所见所闻。

先吃饭，晚上有空再完善

 

Angular 2 TemplateRef & ViewContainerRef

Angular 4.x 动态创建组件

Angular 2 ViewChild & ViewChildren

https://www.zhihu.com/question/54554874

转载于:https://my.oschina.net/u/2949632/blog/1525439

weixin_33753003
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）
徐海东的博客
07-13 2万+
目录问题：获取this.$refs为空对象或者为undefined原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）解决方法：ref在非H5端使用在自定义的组件原因二：使用了版本过低的调试基础库原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取
Vue中ref和$refs的介绍与使用
chenzimin_blog
04-25 3411
之前没怎么注意 ref 的使用。后来一次结合 for 循环使用。才发现 ref 的使用细节满满。于是就总结了一下。 ref作用 用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。 1、如果给普通的dom元素使用，引用指向的是dom元素。 2、如果是给子组件使用，引用指向的是子组件的实例。 注意： 1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。 2、微信小程序中给dom元素使用ref无效。得到的是 空对象
Angular中的ViewContainerRef的几个概念和总结
weixin_34163553的博客
12-27 1116
2019独角兽企业重金招聘Python工程师标准>>> ...
手写ngIf，使用视图容器引用ViewContainerRef和模板引用TemplateRef
dongnihao的博客
11-07 296
此class会在初始化期间，调用 ngOnChanges方法，他接受SimpleChange 对象，根据表达式当前的值来判断是否显示当前的内容。对象用于管理视图容器，是视图的集合。视图就是 包含指令，绑定，表达式的HTML元素区域。视图的创建通过ViewContainerRef类提供的各种API来实现。写这篇博客的原有：虽然Angular官网有提到指令的使用，以及相关Ref的使用，但是对相关Ref并没有做出详细的解释。向用户显示 ng-temple 元素的内容，然后使用。，也没有提供相关的详细文档。
Uniapp H5 ref 修改元素背景颜色
zerlinda0913的博客
08-22 2066
<template> <view> <view ref="r1" @click="cancel"><text>11111111</text></view> <router-link to="/index" event="mouseover">hhh</router-link> </view> </template> <script> export default.
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
10-18
<ng-container *ngTemplateOutlet="loading"></ng-container> ``` 在这个例子中，`ng-template`定义了一个包含登录和注册按钮的模板，并通过`ngTemplateOutlet`指令将其插入到`ng-container`中。`ng-container`是一...
angular之ng-template模板加载
08-28
例如：<div *ngIf="hero" >{{hero.name}}</div>会被解析为：<ng-template [ngIf]="hero"> <div>{{hero.name}}</div></ng-template> 在Angular中，我们可以使用ng-template元素来实现模板加载，例如： <ng-template...
详解Angular路由 ng-route和ui-router的区别
08-30
template: '<div><ui-view></ui-view></div>' }) .state('parent.child', { url: '/child', templateUrl: 'child.html', controller: 'ChildCtrl' }); }); ``` 在这个例子中，`parent` 是一个父状态，包含一...
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
10-16
每个 `<ngb-tab>` 可以包含一个或多个 `<ng-template>`，这些模板分别用于定义标题和内容。标题可以通过 `[ngbTabTitle]` 指令或 `title` 属性来指定，而内容则使用 `[ngbTabContent]` 指令： ```html <ngb-tabset>...
ng-alain表单使用方式详解
08-27
ng-alain表单使用方式详解是Angular框架中的一种表单使用方式，主要介绍了ng-alain表单的使用方式详解，包括模板驱动和响应式表单两种不同的架构范式。 一、模板驱动表单 模板驱动表单是一种使用HTML模板来构建...
教你如何在@ViewChild查询之前获取ViewContainerRef
weixin_34273481的博客
12-26 642
原文：https://blog.angularindepth.c...作者：Max Koretskyi译者：而井 【翻译】教你如何在@ViewChild查询之前获取ViewContainerRef 在我最新的一篇关于动态组件实例化的文章《在Angular中关于动态组件你所需要知道的》中，我已经展示了如何将一个子组件动态地添加到父组件中...
Angular的ViewContainerRef、TemplateRef、EmbeddedViewRef
cc的博客
11-02 780
ViewContainerRef 可以包含一个或者多个视图的容器 TemplateRef 内嵌模板，可用来创建内嵌视图 EmbeddedViewRef 内嵌视图 假设ts中注入private viewContainerRef：ViewContainerRef ，private templateRef：TemplateRef 两个服务 在ViewContainerRef 和TemplateRef 中都有createEmbeddedView创建视图的方法，所以往ViewContainerRef 容器插入视图
使用ViewContainerRef探索Angular DOM操作技术
weixin_33842304的博客
01-12 255
每当我阅读中遇到，关于Angular中使用DOM的内容时，总会看到一个或几个这样的类：ElementRef，TemplateRef，ViewContainerRef等等。 不幸的是，虽然其中的一些被Angular文档或相关文章所讲述，但是我还没有找到完整的描述以及这些它们是如何工作的。 如果你来自angular.js世界，那么你知道操纵...
angular 绑定自定义属性_[译]探索 Angular 使用 ViewContainerRef 的 DOM 操作技术
weixin_39620037的博客
12-01 190
原文链接：Exploring Angular DOM manipulation techniques using ViewContainerRef​indepth.dev本文探讨了在 Angular 被用于操作 DOM 的常见元素，特别着重于 ViewContainerRef。了解为什么需要它们，它们如何工作以及在什么时候使用它们。每当看到有关在 Angular 使用 DOM 的信息时，我总会看到...
templateref html内容,Angular中TemplateRef，ViewContainerRef
weixin_39591455的博客
06-09 265
一、TemplateRef官网解释我们先来了解一下 HTML 模板元素 - 。模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。ng v4以来不推荐使用。请 改用。image.png如上所示，因为模板元素的机制，模板元素中的内容，如果没有进行处理对用户来说是不可见的image.png...
akka框架：（九）STM软件事务内存
qq_34114121的博客
06-15 1173
转载：https://blog.csdn.net/liubenlong007/article/details/54576412 软件事务内存（STM）：顾名思义，这是事务。与关系型数据库中的事务类似，具有ACID属性。 在分布式任务中，有可能会有和事务相关的处理，这里将举例说明AKKA中STM的用法。 假设公司给员工发工资业务，CompanyActor是公司actor， EmployeeAct...
Angular2+ ViewChild & ViewChildren解析
idomyway的博客
03-23 1280
ViewChild &nbsp;&nbsp;&nbsp;&nbsp;ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在ngAfterViewInit钩子函数中，才能正确获取查询的元素。 @ViewChild 通过模板变量名获取DOM元素 import { Component, ElementRef,...
Android Fragment 真正的完全解析（上）
weixin_30632883的博客
07-20 3200
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/37970961自从Fragment出现，曾经有段时间，感觉大家谈什么都能跟Fragment谈上关系，做什么都要问下Fragment能实现不~~~哈哈，是不是有点过~~~本篇博客力求为大家说明Fragment如何产生，什么是Fragment，Fragment生命周期，如何静态和动...
--save 和 --save-dev 的作用和区别简单描述
热门推荐
cvper's world !
03-21 4万+
这是一个使用npm时的基本的问题； 简单来说： 使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中； dependencies 中记录的都是项目在运行时需要的文件； 使用命令 --save-dev 则会把信息记录到 devDependencies...
解释这段代码： <ng-template pTemplate="emptymessage"> <tr> <td [attr.colspan]="isReadonly()?9:10" class='text-center'> <app-sn-data-empty></app-sn-data-empty> </td> </tr> </ng-template>
最新发布
07-13
这段代码是一个Angular模板中的ng-template指令的使用示例。ng-template是Angular中用来定义可重用模板的指令之一。 在这段代码中，ng-template被命名为"emptymessage"，并通过pTemplate属性绑定到某个组件上。当该组件需要展示一个空消息时，就会使用这个ng-template。 在ng-template标签内部，有一个<tr>标签，表示表格中的一行。这一行包含一个<td>标签。 [attr.colspan]是一个Angular的属性绑定语法，它用来动态设置该<td>元素的colspan属性的值。根据isReadonly()函数的返回结果，如果为true，则设置colspan为9，否则设置为10。 class='text-center'是一个CSS类，用于将该<td>元素中的文本居中显示。 <app-sn-data-empty></app-sn-data-empty>是一个自定义组件，它会被放置在<td>元素中。这个组件用来展示一个空数据的提示信息。 综上所述，该代码片段实现了一个当数据为空时显示空消息的功能，并根据isReadonly()函数的返回结果动态调整表格单元格的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值