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获得宿主元素注入器里注入的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。