使用@host获得宿主元素注入器里注入的内容

container Component：

<app-host-decorator appHostDecorator><app-host-decorator-child></app-host-decorator-child>
</app-host-decorator>

app-host-decorator的实现：

import {Component} from '@angular/core';
import {HostComponentService} from './host-component.service';
import {TOKEN_HOST_CLASS_PROVIDER} from '../parameter-decorator-constant';
import {HostTokenComponentService} from './host-token-component.service';@Component({selector: 'app-host-decorator',template: `<h3>@Host -- 获取宿主元素注入器里面注入的对象</h3><ng-content></ng-content>`,providers: [HostComponentService,{provide: TOKEN_HOST_CLASS_PROVIDER, useClass: HostTokenComponentService}]
})
export class HostDecoratorComponent {}

app-host-decorator-child的实现，该child Component的template内容，会显示在parent Component的ng-content里：

import {Component, Host, Inject} from '@angular/core';
import {HostComponentService} from './host-component.service';
import {TOKEN_HOST_CLASS_PROVIDER} from '../parameter-decorator-constant';
import {HostTokenComponentService} from './host-token-component.service';@Component({selector: 'app-host-decorator-child',template: `<p>child Component里，ng-content对应的内容</p>`
})
export class HostDecoratorChildComponent {constructor(@Host() private componentService: HostComponentService,@Host() @Inject(TOKEN_HOST_CLASS_PROVIDER) private tokenService: HostTokenComponentService) {}
}

消费该Component的HTML代码：

<app-host-decorator appHostDecorator><!--<app-host-decorator-child></app-host-decorator-child>-->
</app-host-decorator>

Directive的代码：

import {Directive, Host, Inject} from '@angular/core';
import {HostComponentService} from './host-component.service';
import {TOKEN_HOST_CLASS_PROVIDER} from '../parameter-decorator-constant';
import {HostTokenComponentService} from './host-token-component.service';@Directive({selector: '[appHostDecorator]'
})
export class HostDecoratorDirective {/*** @Host() 获取宿主元素里面提供的服务(宿主元素注入器提供的服务)* @param componentService* @param tokenService*/constructor(@Host() private componentService: HostComponentService,@Host() @Inject(TOKEN_HOST_CLASS_PROVIDER) private tokenService: HostTokenComponentService) {console.log('in host Decorator directive: ',componentService, tokenService);}
}

运行时我们能发现，无论是在Directive里还是在child Component里，我们使用@host，都能拿到 host Component里注入器注入的实例：

更多Jerry的原创文章，尽在：“汪子熙”:

使用@host获得宿主元素注入器里注入的内容相关推荐

Mac系统下docker容器无法使用--net host共享宿主机端口的解决方案
文章目录背景解决过程一分析 Mac系统下docker容器无法使用--net host共享宿主机端口的原因 docker的网络配置 host模式 overlay模式 macvlan模式 bridg ...
投影元素直接隔离_Angular ngcontent 内容投影
前言内容投影和ng-content是可以让我们最大程度构建可重用组件的Angular功能之一.我们来构造一个小组件,一个Font Awesomne输入框.我们设计这个组件的目标是为了构造一个带有图标 ...
python txt提取特定数据_Python提取列表中的内容用“python”怎么提取文件里的指定内容？...
用"python"怎么提取文件里的指定内容? python读取文件内容的方法: 一.最方便的方法是一次性读取文件中的所有内容并放置到一个大字符串中: all_the_text = ...
cvc-complex-type.2.4.d: 发现了以元素 ‘base-extension‘ 开头的无效内容。此处不应含有子元素。
问题描述升级到了最新的AS版本之后,原来还能跑的项目现在跑不了了,报: cvc-complex-type.2.4.d: 发现了以元素 'base-extension' 开头的无效内容.此处不应含有子 ...
同步项目时，出现cvc-complex-type.2.4.a: 发现了以元素xxxxxx开头的无效内容。应以 xxxxx 之一开头的问题解决方案
前言大家在接手老项目的时候会不会出现如下述问题呢. cvc-complex-type.2.4.a: 发现了以元素 'base-extension' 开头的无效内容.应以 '{layoutlib}' ...
js中显示一个指定html文档,JS实现选定指定HTML元素对象中指定文本内容功能示例...
本文实例讲述了JS实现选定指定HTML元素对象中指定文本内容功能.分享给大家供大家参考,具体如下: 该功能用处多多,可以灵活运用之!主要函数如下: //选中文本中指定部分 function selec ...
html粘贴excel内容,如何用JS解析剪切板里的excel内容
前言这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践 ...
MyBatis中提示：元素类型为 mapper 的内容必须匹配 (cache-ref|cache|resultMap*|parameterMap*|sql*|insert*|update*|de
场景整合MyBatis后运行项目提示: 元素类型为 "mapper" 的内容必须匹配 "(cache-ref|cache|resultMap*|parameterMap ...
元素类型为 “resultMap” 的内容必须匹配 “(constructor?,id*,result*,association*,collection*,discriminator?)”
错误原配置如下: <resultMap id="xxxDetail" type="xxx" extends="xxxResult"& ...

使用@host获得宿主元素注入器里注入的内容

使用@host获得宿主元素注入器里注入的内容相关推荐

最新文章

热门文章