获取ng-template的内容
是指通过编程方式获取Angular中的模板内容。ng-template是Angular中的一个指令，用于定义一个模板块，可以在组件中引用并动态加载。获取ng-template的内容可以通过以下步骤实现：
- 在组件的模板文件中定义ng-template标签，并设置一个唯一的标识符，如#templateRef：
- 在组件的模板文件中定义ng-template标签，并设置一个唯一的标识符，如#templateRef：
- 在组件类中使用@ViewChild装饰器获取ng-template的引用：
- 在组件类中使用@ViewChild装饰器获取ng-template的引用：
- 在组件类中可以通过templateRef变量访问ng-template的内容，可以将其用于动态加载或其他操作：
- 在组件类中可以通过templateRef变量访问ng-template的内容，可以将其用于动态加载或其他操作：
获取ng-template的内容常用于动态组件、自定义指令、结构型指令等场景，可以根据具体需求进行灵活应用。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云容器服务（TKE）、腾讯云函数计算（SCF）。
腾讯云云服务器（CVM）产品介绍链接：https://cloud.tencent.com/product/cvm 腾讯云容器服务（TKE）产品介绍链接：https://cloud.tencent.com/product/tke 腾讯云函数计算（SCF）产品介绍链接：https://cloud.tencent.com/product/scf
相关·内容
我正在处理动态内容，我使用带有自定义指令的ngTemplateOutlet来创建它，但是现在需要访问创建的内容元素。在类似的问题列表中，我无法找到与我的问题有关的任何相关答案。
我的当前设置(我将省略不必要的部分，以使示例尽可能清楚)
内容主机组件：
(grid.host.component.ts)
@ContentChildren(VvsGridInputCellDirective, { descendants: false }) public inputCols: QueryList<VvsGridInputCellDirective<T>>;
public ge
浏览 3提问于2020-04-10得票数 2
回答已采纳
我有以下指令：
@Directive({
selector: '[appTest]'
})
export class TestDirective {
@ContentChild(ButtonComponent, { static: false }) button;
constructor() { }
ngAfterContentInit() {
console.log(this.button);
}
}
我想在<ng-template>中使用它
<ng-template appTest>
<app-button&
浏览 0提问于2020-06-21得票数 1
1回答
基本上，我正在尝试创建一个gui，以便更容易地编辑文件。
我有这样一个数组：(键是动态的，所以数组不使用模板，我可以引用它的内容)。
当我试图遍历它时，会出现一个错误：
无法读取未定义的属性“日期”
这个错误发生在multiarray.component.html中的这一行。
<ng-template [ngIf]="getType(configFile[key][sub]) === 'multiarray'">
<multiarray-component [key]="sub" [configFile]=
浏览 1提问于2017-07-15得票数 1
我正在尝试从我的ngx-datatable中删除我的第一行。我已经用这个html在我的工作的顶部创建了一个按钮：
<button (click)="onRemoveRow(0)">Remove First Row</button>
<ngx-datatable
#table
class='material'
[columns]="columns"
[columnMode]="'force'"
[rowHeight]="'auto'"
[rows]=&#
浏览 2提问于2018-08-06得票数 1
回答已采纳
我正在创建一个选项，将自定义列添加到PrimeNg表中。我之所以要创建这个选项，是因为我提供了一个默认表，其中已经设置了许多配置选项。
我遇到的问题是，我似乎无法多次重复ng-template组件。
我的版本
角7.2.12
Primeng 7.1.0
@角/动画7.2.12
我想要实现什么
我希望创建一个包装器，简化列的创建，并消除在表主体中创建多个模板的需要。
例如，我想简化的内容：
<table>
<!-- Row 1 -->
<ng-template #header><th>edit></th>
浏览 3提问于2019-04-04得票数 0
1回答
在我的角度项目中，我使用了一个PrimeNg表，我想打印这个表的所有数据和选定的数据--我不知道我是怎么做的--如果有什么方法或方法来处理它？我的模板
<div class="mainTbl">
<p-table #filterT
[columns]="cols" [value]="clients"
[scrollable]="true" [paginator]="false" [rows]="2"
浏览 2提问于2019-11-04得票数 0
回答已采纳
我使用来创建一个web应用程序。
我对html代码块使用了很多ng-templates，这些代码块被多次使用以符合Don(不要重复自己)。
问题：是否可以根据屏幕的宽度更改ngTemplateOutlet值？
示例：
<ng-template #fullWidthContainer>
<!-- code left out on purpose -->
</ng-template>
<ng-template #halfWidthContainer>
<!-- code left out on purpose -->
</
浏览 2提问于2019-10-30得票数 1
1回答
父组件如何将多个ng模板传递给子组件？
示例父组件包含多个ng模板：
<app-childcomponent>
<ng-template>Item A</ng-template>
<ng-template>Item B</ng-template>
...
</app-childcomponent>
子组件需要从父组件接收ng模板并放入app-menu中。
<app-menu>
<ng-content></ng-content>
</app
浏览 4提问于2018-02-26得票数 3
1回答
我想知道最好或推荐的方法是将模板传递给子组件。据我所见，基本上有3种方法可以做到这一点：
备选案文1
parent.html
<ng-template #mytemplate>
<!-- some stuff -->
</ng-template>
<child [stuff]="myTemplate"></child>
child.ts
@Input() public stuff: TemplateRef<any>;
child.html
<ng-container [ngTemplateOut
浏览 1提问于2019-11-23得票数 8
如何只呈现pending
我构建了一个布局组件，我用ng-template包装每个部分，因为我不想立即呈现内容。
如何只呈现ng-template#pending
<search [results]="searchResults$ | async" [pending]="pending$ | async">
<form filter ...>...</form>
<ng-template #empty>empty!</ng-template>
<ng-template #pending
浏览 4提问于2022-03-28得票数 0
回答已采纳
1回答
是否有一种访问#接口的方法，它是在ng-template元素中声明的？
我必须将<接口-设置放在<ng-模板中。
因为我需要使用*ngTemplateOutlet。
因为我找不到解决这个问题的方法，所以我必须添加另一个<interface- not #接口，而不是在ng-template中声明它。
如果你知道其他解决办法会很感激的。谢谢
// parent.html
<button type="button" (click)="interface.apply()"></button>
<ng-templa
浏览 5提问于2020-08-07得票数 2
回答已采纳
我有一个数据表，我正在尝试使该列careOfferingSpaceAvailableId可编辑，然后一旦用户编辑，我希望也在数据库中更新该行列。
1.)但是，由于某些原因，UI不能将该列呈现为可编辑的。
2.)我有一个“下一步”按钮，一旦单击，我就不知道如何获取用户输入到可用空间可编辑列中的值。我需要获取每个spaceAvailable输入以及它的careOfferingSpaceAvailableId以更新到数据库。
<p-dataTable [value]="this.careOfferingSpaceList" [editable]="true"
浏览 0提问于2018-02-21得票数 0
2回答
角可重用模板
、、、
可以编写可重用的ng-template吗？我的许多组件都使用完全相同的ng-template。
例如：
<kendo-grid>
<kendo-grid-column field="group">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
<kendo-dropdownlist #listGroups [data]="groups&
浏览 4提问于2017-09-06得票数 6
回答已采纳
2回答
这是我的模板：
<ng-template #template>
<input #newimg type="file" class="col-md-10" (change)="fileChange($event)"/>
</ng-template>
当#newimg在ng-template中时，我无法获得对它的引用(如果我将ng-template更改为div，它可以正常工作！)
@ViewChild('newimg') img: ElementRef; //doesnt work
我需要
浏览 5提问于2017-11-22得票数 11
1回答
正如标题中所说，我正在尝试测试ng-template中的输入。问题是，我不能访问输入。如果我从ng-template中取出输入，它可以工作，但我需要它在ng-template中。
emp.html的代码来自primefaces文档。链接：过滤部分
emp.html
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="fa fa-search" style="margin:4px 4px
浏览 0提问于2018-12-18得票数 5
1回答
我正在使用角和ngbNav来创建标签。问题是，我有来自API的选项卡名，为了显示它们，我需要ngFor，但是对于选项卡的内容，我应该显示不同的组件。为了实现这一点，我使用了ngSwitch。
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem *ngFor="let element of elements" [ngSwitch]="element.name">
<a ngbNavLink>
浏览 9提问于2022-07-20得票数 1
回答已采纳
1回答
角度绑定到文件输入域的选择？
、、、、
我有一个简单的上传表单，希望将显示的文件名绑定到文件输入字段<input type="file">的值，但由于某些原因，它总是显示一些虚拟文件路径。如何改进绑定以使其不具有此行为(仅具有文件名，如selected.files[0].name)？ 理想情况下，选定的文件名应该在操作系统文件回显程序完成后立即显示在#selected的标签中。我的另一种方法包含在注释(*ngIf)中，但它也不起作用。 <form>
<div class="justify-content-center">
<div c
浏览 15提问于2020-01-20得票数 2
回答已采纳
2回答
正在尝试将数据显示在我的表中。我认为我没有正确地进行数据绑定。 其中一个接口返回一个不同接口的数组，如下所示： import { ExceptionDetailLine } from './exception-detail-line-interface';
export interface ExceptionReportData {
exceptionReportTitle: string,
exceptionReportLines: Array<ExceptionDetailLine>
} ExceptionDetailLine接口： export i
浏览 20提问于2020-06-10得票数 0
3回答
问题(角7)
我希望能够“修改”重写组件的模板，而无需重写整个模板，这意味着它将与重写的组件共享相同的html模板。目标是能够自定义组件，并且覆盖组件模板上的任何更改都将直接反映在覆盖组件中。
也许我们可以说，我想在两个组件之间共享部分逻辑和模板。
当前实现的示例
@Component({
selector: 'component-a',
templateUrl: './component-a.html'
})
export class ComponentAComponent {
constructor() { }
}
@Component({
浏览 2提问于2019-08-26得票数 0
1回答
如何创建带导出的剑道网格:我有带列的剑道网格。列有模板。当我将网格导出到excel文件时，使用模板的列不会显示
<kendo-grid [data]="dataSource"
[sortable]="true"
[pageable]="false"
[filterable]="false"
[selectable]="false">
<ng-template kendoGridToolbarTemp
浏览 1提问于2018-09-21得票数 0
回答已采纳
我有一个问题，我使用Metronic和KendoUI(DataGrid)。我试图从API中获取数据。一切都很好但是..。当我收到数据时，DataGrid，直到我更改输入的值(所有列的筛选器)，才会显示结果。
我希望这是为了桌子的状态。有人知道如何实现/修复它吗？
这是我的TypeScript
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-gr
浏览 2提问于2019-10-10得票数 0
回答已采纳
在app.component.html中，我正在检查哪个页面正在加载，而不是由url加载。如果是登陆页，则插入其他页面的image1 else，插入image2。
<ng-container *ngif= "!app-home;then restOfThePages;else landingPage">
</ng-container>
<ng-template> #landingPage
<Image1 class ="....">
</ng-template>
<ng-template #
浏览 4提问于2022-02-19得票数 0
回答已采纳
2回答
我想从我的typescript代码中打开模式，即当组件加载到ngOnit()时，模式弹出窗口应该打开，我不想在html文件上创建一个按钮。 HTML： <button class="btn btn-outline-primary mb-2 mr-2" (click)="openSm(content)">Small modal</button>
<ng-template #content let-modal>
<div class="modal-header">
<h4 clas
浏览 25提问于2021-08-02得票数 0
回答已采纳
当templateUrl在ngInclude中有一个ngTemplate时，它会给我带来麻烦。
我的index.html
<div ng-include="'./html/root.html'"></div>
我的root.html
<script type="text/ng-template" id="home.html">
<div class="content">
<div class="group">
<
浏览 2提问于2014-03-19得票数 1
1回答
我是Ionic的新手，正在使用一系列形式的mat-vertical stepper。我不明白为什么页面上的内容不会滚动，尽管内容离开了页面。
我试过在不同的地方使用overflow: auto/scroll，并添加ion-content，但ion-content只会导致内容消失(控制台中没有错误)。
代码被缩写，以删除表单和其他无关的html。
<mat-card style="min-height: 100%">
<mat-card-content>
<app-login (action)="toggleCompone
浏览 6提问于2019-07-24得票数 0
回答已采纳
我查看了角和ng选择的文档，但是我找不到任何提到ng模板旁边这两个属性的内容。
ng-typetosearch-tmp和ng-notfound-tmp
<ng-select>
<ng-template ng-typetosearch-tmp>
<div class="ng-option-disabled">
text1...
</div>
</ng-template>
<ng-template ng
浏览 8提问于2022-06-08得票数 0
回答已采纳
我希望使用ng-template检索@ContentChildren中的组件。
参见这里的示例：
我的用例如下:我有两个通用面板，必须显示在我想要使用的每个选项卡视图中。这些面板被包装到一个组件中，该组件由其他各种组件调用。对于每个组件，我可以在泛型面板之后添加不同的面板。为此，我需要模板的引用(TemplateRef)和组件的引用来获得它的值( TabPanel)。
在stackblitz的控制台中，可以看到变量tabPanels包含两个元素: AppComponent模板中包含的两个TabPanel，位于ng-template之外。因此，descendants属性可以很好地处理这些元素。
浏览 0提问于2018-06-11得票数 2
我试着用p表显示冻结栏的原始数据。如果Frozen列数据不适合一行，则冻结的列和可滚动的列数据会出现对齐错误(如下所示)：
代码：-
<p-table #dt dataKey="question" [columns]="scrollableColsForQuestionsStats" [frozenColumns]="frozenColsForQuestionStats"
[paginator]="true" [rows]="3" [value]="quest
浏览 2提问于2020-01-14得票数 2
1回答
我正在尝试使用角度材料步进器作为进度跟踪器(我知道它不适合它……但这是唯一符合我要求的)。我的踏板上有5个台阶。
我想要在产品或项目达到该点时打开颜色。我找到了用于它的类mat-step-icon-selected。但它不起作用。
我将从API获取数据，该API将返回状态/步骤号。在此基础上，我需要改变颜色。
我不能改变班级的颜色。我尝试在mat-step上使用ngClass，但它不起作用。
这是我的代码：
<mat-horizontal-stepper [linear]="true">
<mat-step>
<ng-t
浏览 5提问于2020-02-04得票数 0
我使用的是角6和Telerik kendo网格4.8.4。
下面是kendo网格的示例代码。
<kendo-grid #grid="kendoGrid" class="k-grid-fullheight" (cellClick)="onCellClick($event)"
(dataStateChange)="dataStateChange($event)" [sortable]="{allowUnsort: false, mode: 'single'}"
[s
浏览 1提问于2021-10-19得票数 0
回答已采纳
1回答
我已经读了很多关于角模板的文章，但是我没有发现任何与我想要存档的模板非常相似的东西，更不用说在2+中模板是令人困惑的，因为它不会使任务变得比应该的更容易。
我想知道我怎样才能做这样的事情(如果可能的话)：
<my-form>
<ng-template [for]="title">Users</ng-template>
<ng-template [for]="content">
<form>
<input type="text" name="use
浏览 1提问于2018-08-22得票数 1
回答已采纳
2回答
当试图显示可编辑输入的网格时，我出现了性能问题。在大约200行和10列时，它开始变得非常慢。(使用角4.4)
<tr *ngFor="let row of rows">
<td *ngFor="let column of columns">
<ng-container [ngSwitch]="column.columnType">
<ng-template [ngSwitchCase]="0">
<input [(ngModel)]=&#
浏览 0提问于2018-04-26得票数 8
回答已采纳
2回答
下面是显示选项卡内容的方法：
<mat-tab-group>
<mat-tab label="First">
<ng-template matTabContent>
The First Content
</ng-template>
</mat-tab>
</mat-tab-group>
这两者有什么区别？
<mat-tab-group>
<mat-tab label="First">
<ng-template *n
浏览 0提问于2019-09-03得票数 1
回答已采纳
我只想显示登录或登录/向上按钮，这取决于从服务器获取的isAuthenticated值。
当用户在页面重新加载后登录时，我简要地看到了登录/向上，然后注销了<p>{{!(isAuthenticated$ | async)}}</p>，true，然后是false。
我注意到如果删除感叹号<p>{{(isAuthenticated$ | async)}}</p>，这种效果就会消失。
那么，将值从true转换为false的操作花费了太多的时间，以至于眼睛都可以看到它？如果要先对表达式进行求值，然后将结果呈现出来，那么为什么我看到的是true，然后是fa
浏览 0提问于2018-07-15得票数 1
回答已采纳
在下面的示例stackblitz中，我使用了角度材质步进器组件 我正在尝试通过使用ngoninit中的表stepicons更改选择器mat-step的状态来动态地将每个步骤的默认编号更改为material图标。有人能帮我吗？ <mat-vertical-stepper (selectionChange)="selectionChanged($event)" [linear]="true" style="width:100%;height:100%">
<ng-template matStepperIcon="edit&
浏览 23提问于2019-09-29得票数 0
回答已采纳
1回答
子组件之间的双向绑定角度8
、、、、
我在Angular 8中遇到了一个问题。我使用了一个角度材质的步进器，每一步都是一个不同的组件，并且有一个包含所有步进器enter image description here的父组件。 这是我的主要组件，如您所见，我将一个名为Campaign的表单组发送到三个组件中： <mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [completed]="false">
<ng-template matStepLabel>DATOS GENERALES&
浏览 12提问于2020-03-31得票数 0
我有两个组件home.components (父亲)和room.component.ts (儿子)，有两种语言，英语和西班牙语。
当我使用一种语言在主页组件中导航到房间组件时，在两个组件中选择的语言是相同的，但是当我在房间组件(儿子)中更改语言并导航到主页(父亲)时，选择的语言是不同的。
如何解决这个问题？使用output()和input()？或具有角周期寿命？
home.component.ts
<ul class="navbar-nav navbar-right">
<span class="for
浏览 0提问于2021-11-26得票数 0
我有一个kendo用户界面网格的grid.Each行，有checkbox.When用户选中复选框，然后我试图获得选定的row.How的数据，我可以获得选定行的数据时，用户选中网格的复选框。请帮我提前谢谢。
<kendo-grid [data]="activeTabData" [selectable]="selectableSettings" [height]="410">
<kendo-grid-column field="" title="" width="1
浏览 15提问于2017-08-27得票数 0
1回答
我的“棒极了”菜单：
<mat-menu #appMenu="matMenu">
<ng-template matMenuContent let-myobject="myobject">
<button mat-menu-item>Delete {{myobject.name}}</button>
<button mat-menu-item>Smth else</button>
</ng-template>
</mat-menu>
<b
浏览 12提问于2019-03-27得票数 14
1回答
我想知道是否可以使用模板引用变量访问ng-template中的模板组件？我试过使用@ViewChild和@ContentChild，但它们似乎都不起作用:我想访问应用程序公共的内容。
<ng-template #first>
<app-common #second><app-common>
</ng-template>
@ViewChild('second') second1: ElementRef;
@ContentChild('second') second2: ElementRef;
ngAfterVie
浏览 1提问于2018-08-27得票数 0
我正在尝试实现一个ngx-datatable，只有当鼠标悬停在row上时，我才需要显示删除图标。现在，当我将光标放在行上时，它会在所有行中显示删除图标，而不是正确的行。那么，正确的方法是什么呢？
<ngx-datatable [rows]="rows"
class="material"
[columns]="columns"
[columnMode]="'force'"
[headerHe
浏览 0提问于2018-09-18得票数 0
当我使用*ngIf时，为什么我必须绑定到附加到ng-template元素的模板变量？例如：
这样做是可行的：
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
但这是行不通的：
<div *ngIf="show; else elseBlock">Text to show</div&
浏览 2提问于2017-07-25得票数 2
回答已采纳
1回答
我在用这个旋转木马：
lists : any;
...
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide *ngFor="let list of lists">
</ng-template>
</owl-carousel-o>
我有2000条记录，如果我加载所有记录一次，那么它将是缓慢的，我可以一个一个地加载记录和管理它，如果用户点击下一个和以前的按钮。
谢谢
浏览 6提问于2021-12-16得票数 0
我有一个角4模板如下。我正在尝试对名称‘{{ngTemplateOutlet=}}！=xyz’执行字符串比较...如下所示，但得到模板解析错误:意外字符"EOF“(您的模板中是否有未转义的"{”？使用"{{ '{‘}}")进行转义。有人能帮上忙吗？
(代码参考: )
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<div>
<h3>Al
浏览 0提问于2018-02-03得票数 1
1回答
我试图在单列悬停时更新表格单元格，并不是相同content.this的所有列都在更新我的ngswitchCase处于挂起状态的所有列，但我只希望该特定行的表中的单个单元格更新/呈现不同的按钮。
<div [ngSwitch]="rowData['dataFromJson']">
<div *ngSwitchCase="'pending'">
<div *ngIf="condition"; then thenBlock; else elseBlock">
浏览 0提问于2019-04-04得票数 0
1回答
我无法访问templateRef中的索引，它在控制台中抛出未定义。
<ng-container *ngFor="let notification of notifications; let i = index">
<ng-template
*ngTemplateOutlet="notificatioPageContent; context: { notification: notification, index: i }">
</ng-template>
</ng-containe
浏览 6提问于2020-02-17得票数 0
4回答
在下面的示例中，我使用了如下所示的ng-template，它运行得很好。
示例链接：
<ng-template #template let-dataSource="">
<span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}}
<span *ngIf="dataSource.templa
浏览 6提问于2018-12-06得票数 17
回答已采纳
我想知道使用ng模板的理想情况是什么。我有下面的情景。代码如下所示
<div *ngIf="somecond">html inside1</div>
<div *ngIf="somecond1">html inside2</div>
<div *ngIf="somecond2">html inside3</div>
其他开发人员修改如下
<ng-template #text1>html inside1</ng-template>
<ng-temp
浏览 0提问于2018-06-18得票数 5
回答已采纳
我得到了一个错误，我从来没有见过在我的角度应用程序。该错误发生在角源代码的上。
当我注销并重新登录我的应用程序时，就会发生这种情况。当我这样做的路线上有一个可观察的被观察，并且当它发出一个值到它的流，任何观察将更新值和变化检测将运行，从而移除一些元素和添加一些其他的元素。
我很确定下面的组件负责这个错误。有人能看出我做错了什么吗？我留下了我认为可能与bug相关的部分，并注释掉了其他所有内容。也许我在这里不恰当地使用了ngTemplateOutlet和ContentChild .
组件：
@Component({
selector: 'paginated-infinite-scr
浏览 0提问于2018-02-22得票数 0
回答已采纳
我遇到了一个奇怪的bug，在ng-template中包装了一个ng-content。
假设我有一个在outer-component中显示的组件inner-component
<ng-container *ngIf="condition" [ngTemplateOutlet]="test"></ng-container>
<ng-template #test>
<inner-component></inner-component>
</ng-template>
如果为condition
浏览 5提问于2020-09-10得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
