在Angular中,可以使用ng-template指令来解除组件模板的包装。下面是一个示例代码:
Component Template Content
@ViewChild(TemplateRef) templateRef: TemplateRef;
这样,组件的模板内容就可以被解除包装,直接渲染在父模板中。
完整的示例代码如下:
组件模板文件(child.component.html):
Component Template Content
组件文件(child.component.ts):
import { Component, TemplateRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@ViewChild(TemplateRef) templateRef: TemplateRef;
}
父模板文件(parent.component.html):
Parent Component
父组件文件(parent.component.ts):
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
@ViewChild(ChildComponent) child: ChildComponent;
}
通过以上代码,父组件将会渲染出子组件的模板内容,而不包含任何额外的包装。
上一篇:Angular - 集成原生Web Speech API的问题
下一篇:Angular - 解析错误:在 [form.loading_date | date: 'dd/MM/yyyy'=$event] 的动作表达式中不能使用管道在列21处。