[Angular Directive] Create a Template Storage Service in Angular 2
You need to define a <template>
to be able to use it elsewhere in your app as a TemplateRef
. You can store these TemplateRef
s in a Service and then access them from any @Directive
or @Component
in your app.
We want to create a service and a component together to store all the templates.
service:
import {Injectable, TemplateRef} from "@angular/core";
@Injectable()
export class TemplatesService {
templates = new Map<string, TemplateRef<any>>();
}
compoment:
import {Component, ViewChild} from "@angular/core";
import {TemplatesService} from "./shared/services/templates.service";
@Component({
selector: 'template-storage',
template: `
<template #header>
<h1>This is header</h1>
</template>
<template #footer>
<h1>This is the footer</h1>
</template>
`
})
export class TemplateStorageComponent {
@ViewChild('header') headerTemplate;
@ViewChild('footer') footerTemplate;
constructor(private service: TemplatesService){ } ngAfterViewInit() {
this.service.templates.set('header', this.headerTemplate);
this.service.templates.set('footer', this.footerTemplate);
}
}
Here, set templates must to present in 'ngAfterViewInit'.
Directive:
import {Directive, TemplateRef, ViewContainerRef} from "@angular/core";
import {TemplatesService} from "../services/templates.service";
@Directive({
selector: '[surround]'
})
export class SurroundDirective {
constructor(
private template: TemplateRef<any>,
private view: ViewContainerRef,
private service: TemplatesService
){} ngAfterViewInit(){
this.view.createEmbeddedView(this.service.templates.get('header'));
this.view.createEmbeddedView(this.template);
this.view.createEmbeddedView(this.service.templates.get('footer'));
}
}
[Angular Directive] Create a Template Storage Service in Angular 2的更多相关文章
- [Windows Azure] How to use the Queue Storage Service
How to use the Queue Storage Service version 1.7 version 2.0 This guide will show you how to perform ...
- [Windows Azure] How to use the Table Storage Service
How to use the Table Storage Service version 1.7 version 2.0 This guide will show you how to perform ...
- [Windows Azure] How to use the Windows Azure Blob Storage Service in .NET
How to use the Windows Azure Blob Storage Service in .NET version 1.7 version 2.0 This guide will de ...
- angular directive scope
angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...
- [Angular 2] Share a Service Across Angular 2 Components and Modules
Services are used to share data between components. They follow a module pattern that allows you to ...
- Windows Azure入门教学系列 (七):使用REST API访问Storage Service
本文是Windows Azure入门教学的第七篇文章. 本文将会介绍如何使用REST API来直接访问Storage Service. 在前三篇教学中,我们已经学习了使用Windows Azure S ...
- [转]Work With Odata in Web API: Create Your First Odata Service
本文转自:http://www.c-sharpcorner.com/UploadFile/dacca2/work-with-odata-in-web-api-create-your-first-oda ...
- 对象存储服务(Object Storage Service,简称 OSS)
阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.它具有与平台无关的RESTful API接口,能够提供99.99 ...
- [AWS vs Azure] 云计算里AWS和Azure的探究(6) - Amazon Simple Storage Service 和 Microsoft Azure Blob Storage
这几天Nasuni公司出了一份报告,分析了各个云厂商的云存储的性能,包括Amazon S3,Azure Blob Storage, Google Drive, HP以及Rackspace.其中性能上A ...
随机推荐
- Eclipse中自动添加注释
方法一:Eclipse中设置在创建新类时自动生成注释 windows-->preference Java-->Code Style-->Code Templates code- ...
- MySQL主从同步配置(详细图解)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶叙述 二丶备份主服务器原有数据到从服务器 三丶配置主服务器master(192.168.4.63) 四丶配置从服务器sl ...
- 【2017中国大学生程序设计竞赛 - 网络选拔赛】A Secret
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] ,S2中出现的次数与其长度的乘积之和. [题解] 扩展KMP的模板题. 首先,把S2和 ...
- Qt源码分析之信号和槽机制(QMetaObject是一个内部struct)
Qt的信号和槽机制是Qt的一大特点,实际上这是和MFC中的消息映射机制相似的东西,要完成的事情也差不多,就是发送一个消息然后让其它窗口响应,当然,这里的消息是广义的说法,简单点说就是如何在一个类的一个 ...
- Flask项目之手机端租房网站的实战开发(十二)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- [Angular] Progress HTTP Events with 'HttpRequest'
New use case that is supported by the HTTP client is Progress events. To receive these events, we cr ...
- [转]MySQLHelper类
本文转自:http://de.cel.blog.163.com/blog/static/5145123620110181003903/ 类似于SQLHelper,只是这里引用的是MySql.Data类 ...
- jquery的滚动事件
$(selector).scroll(function);当滚动到合适的条件下,就触发某个函数. 现在基本就是前端利用AJAX对数据进行拼接操作,渲染进html的DOM结构中.
- jquery设置attr属性值
1.返回属性值 $(selector).attr(attribute); 2.设置属性值 $(selector).attr(attribute,value); 3.设置多个属性值 $(selector ...
- JS学习笔记 - 点击、回车、ctrl+回车提交留言
疑点: oTxt1.onkeydown = function (ev) 为什么这里的onkeydown = function有变量 (ev),前面onclick函数没有? window.onload ...