首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何获取ng-template(Angular 6)中的值?

在Angular 6中,可以通过ViewChild装饰器和模板引用变量来获取ng-template中的值。

首先,在ng-template标签上定义一个模板引用变量,例如:

代码语言:html
复制
<ng-template #myTemplate>
  <p>This is a template</p>
</ng-template>

然后,在组件类中使用ViewChild装饰器来获取该模板引用变量的引用,例如:

代码语言:typescript
复制
import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
  `
})
export class MyComponent {
  @ViewChild('myTemplate') myTemplate: TemplateRef<any>;

  ngAfterViewInit() {
    console.log(this.myTemplate);
  }
}

在上述代码中,通过@ViewChild('myTemplate')装饰器将模板引用变量myTemplate与组件类中的myTemplate属性关联起来。然后,在ngAfterViewInit生命周期钩子中,可以通过this.myTemplate来访问ng-template中的内容。

需要注意的是,ngAfterViewInit生命周期钩子是在视图初始化完成后调用的,所以在该钩子中才能确保模板引用变量已经被正确地赋值。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Redhat6获取LANG为空

但是获取LANG为空.........问题追踪 首先,在安装了产品Redhat5上查看是否存在同样问题(检查是否是前辈遗留历史问题),结果能够正常获取LANG;初步说明代码在获取当前所使用语言方法没有问题; 然后,在Redhat6...脚本执行进程创建子进程执行xxx脚本,那么既然在shell能够获取LANG并且不为空,那么让我们来看一下Redhat6/sbin/service脚本,果不其然,最后调用如下命令去执行xxx脚本...那我们再一起来看看Redhat5/sbin/service脚本,可以看到其中虽然使用了参数'-i',但随后还是将本进程LANG传递给子进程,所以产品在Redhat5执行时,可以获取非空LANG...从文件 "/etc/sysconfig/i18n" 读取LANG

4K20
  • 如何获取变量token

    Token 5.服务端收到请求,然后去验证客户端请求里面带着 Token,如果验证成功,就向客户端返回请求数据 6.web/APP登录时候发送加密用户名和密码到服务器,服务器验证用户名和密码,...二、如何获取token,进行接口测试 接口测试工具大部分都可以获取登录之后返回token,这里给大家讲解如何用apipost获取token方法。...先打开apipost,进行登录接口编写,然后获取token。...引用格式为{{变量名}} 4.png 在去设置后执行脚本获取token,“token”是参数名称,response.json.token意思是返回json数据token。...7.png 选择接口点击添加到流程测试 8.png 9.png 进行流程测试 10.png 11.png 这就是如何获取token进行接口流程测试步骤了。

    14.2K00

    Angular DOM 抽象概述

    通过 DOM API 我们能够方便地获取指定元素,比如获取谷歌首页 id 为 q 输入框: document.querySelector("#q"); 查询结果为: 元素,在 Angular 内部它主要应用在结构指令,比如 *ngIf、*ngFor 等。...示例 前面我们已经介绍了如何使用 HTML5 template 模板元素,下面我们来看一下如何使用 元素。...实际工作,还需要利用 ViewChild、ViewChildren、ContentChild 和 ContentChildren 装饰器,或者基于 Angular 依赖注入特性,通过构造注入方式,获取相关对象...在浏览器环境,虽然通过 ElementRef nativeElement 属性,我们可以方便地获取对应 DOM 元素,但我们最好不要利用 DOM API 进行 DOM 操作,最好通过 Angular

    3.5K30

    js:如何获取select选中

    我想获取select选中value,或者text,或者…… 比如这个: <option value=”A” url=”http://www.baidu.com...; // selectedIndex代表是你所选中项index 3:拿到选中项optionsvalue: myselect.options[index].value; 4:拿到选中项options...text: myselect.options[index].text; 5:拿到选中项其他,比如这里url: myselect.options[index].getAttribute(‘url’...); 二:jQuery方法 1:var options=$(“#select option:selected”); //获取选中项 2:alert(options.val()); //拿到选中项...3:alert(options.text()); //拿到选中项文本 4:alert(options.attr(‘url’)); //拿到选中项url 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人

    26.6K30

    Angular通过$location获取地址栏参数详解

    Angular通过$location获取url参数   最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url参数,我一时半会还真没想起来,刚刚特意研究了一下...获取当前url路径(当前url#后面的内容,包括参数和哈希)   var url = $location.url();   // /homePage?id=10&a=100 3. ...获取当前url子路径(也就是当前url#后面的内容,不包括参数)   var pathUrl = $location.path()   ///homePage 4.获取当前url协议(比如http...//88 6.获取当前url端口 var port = $location.port();   //8100 7.获取当前url哈希   var hash = $location.hash()...location.search().keyword) { 12 13 $scope.keyword = $location.search().keyword; 14 15 } 16 17 }]); 11.js获取地址栏参数方法

    2K30

    在前端理解MVC服务之 Angular篇(完结)

    介绍 本文是该系列第三篇,旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。...但是,了解应用所有部分如何相关联以及其结构方式非常重要。角度允许我们忘记DOM,所以,让user.view.ts文件从我们应用消失。...:BrowserModule 、FormsModule和 reactiveFormsModule,第一个模块用于从 Angular 获取基本结构和属性指令,而第二个和第三个模块用于创建窗体。...模型将具有以下字段: id 唯一 name 用户名 age 用户年龄 complete bool,可以知道此条数据是否有用 用户Class已经被写在TS。...需要强调是,这篇文章要点是,让你了解不同文件具有不同功能项目结构,以及View如何完全独立于Model/Service和Controller。

    4.1K20

    WinCC 如何获取在线 表格控件数据最大 最小和时间戳

    1 1.1 <读取 WinCC 在线表格控件特定数据列最大、最小和时间戳,并在外部对 象显示。如图 1 所示。...左侧在线表格控件显示项目中归档变量,右侧静态 文本显示是表格控件温度最大、最小和相应时间戳。 1.2 <使用软件版本为:WinCC V7.5 SP1。...在 “列”页,通过画面箭头按钮可以把“现有的列”添加到“选型列”,通过“向上”和“向下”按钮可以调整列顺序。详细如图 5 所示。 5.配置完成后效果如图 6 所示。...6.在画面配置文本域和输入输出域 用于显示表格控件查询开始时间和结束时 间,并组态按钮。用于执行数据统计和数据读取操作。如图 7 所示。...点击 “执行统计” 获取统计结果。如图 11 所示。 3.最后点击 “读取数据” 按钮,获取最大、最小和时间戳。如图 12 所示。

    9.2K10

    Python教程:如何获取颜色RGB

    简介 在许多计算机图形和图像处理应用,颜色RGB是至关重要信息。Python作为一种多功能编程语言,提供了丰富工具和库,可以轻松地获取颜色RGB。...本文将介绍如何使用Python获取颜色RGB,以及一些实际应用示例。...该库不需要额外安装,我们可以直接导入使用,下面是一个简单示例代码,演示如何使用PIL库获取图像特定位置颜色RGB: from PIL import Image # 打开图像文件 image...实际应用示例 图像处理 获取颜色RGB可以用于图像处理任务,例如图像分割、颜色识别等。 网页设计 在网页设计获取颜色RGB可以帮助设计师选择合适配色方案。...数据可视化 在数据可视化,使用颜色RGB可以将数据映射到颜色空间,以便更直观地展示数据。 总结 通过使用PythonPIL库或OpenCV库,我们可以轻松地获取颜色RGB

    27110
    领券