首页
学习
活动
专区
工具
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.3K00

    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.7K30

    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

    Angular 6 HttpClient 快速入门

    本教程将介绍如何Angular 6.x 中使用 HttpClient 发送 Http 请求,如 get、post、put 和 delete 请求。...废话不多说,现在让我们来看一下如何Angular 6.x 中使用 HttpClientModule 模块。...每当调用 set() 方法,将会返回包含新 HttpParams 对象,因此如果使用下面的方式,将不能正确设置参数。...默认情况下,HttpClient 服务返回是响应体,有时候我们需要获取响应头相关信息,这时你可以设置请求 options 对象 observe 属性为 response 来获取完整响应对象。...总结 本文通过 jsonplaceholder 提供 API,介绍了如何使用 HttpClientModule 模块 HttpClient 服务,发送 Get、Post、Delete 等请求,同时介绍了如何利用

    5K30
    领券