Question

我想使用依赖注入将主机组件注入其子组件。

我现在的问题是，标记是动态的，并且有多个可能的主机组件。此外，只是最接近的主机组件。获得最近主机组件的最佳方法是什么？

因此我准备了一个stackblitz-app：https://stackblitz.com/edit/angular-7mpnas

这是HTML标记的一个示例

<comp-a [name]="'Lorem'">
    <comp-b [name]="'ipsum'">
        <comp-c [name]="'dolor'">
            <comp-b [name]="'sit'">
                <div class="someDivClass">
                    <hello></hello>
                </div>
            </comp-b>
        </comp-c>
    </comp-b>
</comp-a>

组件：

import { Component, Input, Optional, Host, OnInit } from '@angular/core';
import { CompA } from './comp-a/comp-a.component';
import { CompB } from './comp-b/comp-b.component';
import { CompC } from './comp-c/comp-c.component';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {


  constructor(
    @Optional() @Host() private a: CompA,
    @Optional() @Host() private b: CompB,
    @Optional() @Host() private c: CompC,
  ) {

  }

  ngOnInit() {
    console.log(this.a.name);
    console.log(this.b.name);
    console.log(this.c.name);

    // what Component is the closest Host Element

  }
}

最好的问候......

Answer 1

我不知道是否有一种干净的方式来实现这一点，但您可以使用viewContainerRef元素实现目标。

从这里导入：

import { ViewContainerRef } from '@angular/core';

将其加载到构造函数：

onstructor(
    @Optional() @Host() private a: CompA,
    @Optional() @Host() private b: CompB,
    @Optional() @Host() private c: CompC,
    private viewContainerRef: ViewContainerRef
  )

viewContainerRef包含与主机堆叠在一起的顺序相同的节点。

this.viewContainerRef._view.nodes[last].renderElement是最后一行中出现的组件;持有名称：this.viewContainerRef._view.nodes[i].componentView.component.name

转到here打开控制台并查看日志。

Angular 4+依赖注入 - 从更多可能性中获取最接近的主机组件

1 个答案: