在Angular 7中,可以使用ng-templates来创建可重用的模板。下面是一个示例:
首先,在组件的HTML文件中定义模板:
{{ title }}
{{ content }}
在组件的TS文件中,使用ViewChild装饰器来获取模板的引用:
import { Component, ViewChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
@ViewChild('myTemplate', { static: true }) myTemplate: TemplateRef;
title = 'Hello';
content = 'This is a reusable ng-template';
}
接下来,在另一个组件中使用模板:
在这个示例中,ng-container是一个用于容纳模板内容的容器。使用ngTemplateOutlet指令将模板引用传递给ng-container。
你也可以动态地传递参数给模板:
在组件的TS文件中,定义myContext对象:
myContext = {
$implicit: {
title: 'Dynamic Title',
content: 'Dynamic Content'
}
};
在模板中可以使用$implicit来访问传递的参数:
{{ data.title }}
{{ data.content }}
这样,模板就可以根据传递的参数进行动态渲染了。
这是一个基本的示例,你可以根据需要进行更加复杂的操作和逻辑。