Angular 4+ Dependency Injection - Получение ближайшего хост-компонента из большего количества возможностей - PullRequest
Новая
       10

Angular 4+ Dependency Injection - Получение ближайшего хост-компонента из большего количества возможностей

0 голосов
/ 28 мая 2018

Я хочу внедрить хост-компонент в его дочерний компонент с помощью Dependency Injection.

Моя проблема сейчас заключается в том, что разметка динамическая и существует более одного возможного хост-компонента.Далее нужны только ближайшие компоненты хоста.Каков наилучший способ получить ближайший компонент хоста?

Поэтому я подготовил приложение stackblitz: 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

  }
}

С наилучшими пожеланиями ...

1 Ответ

0 голосов
/ 28 мая 2018

Я не знаю, есть ли чистый способ получить это, но вы можете достичь своей цели с помощью элемента 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 isкомпонент, который встречается в последнем ряду;удерживая имя: this.viewContainerRef._view.nodes[i].componentView.component.name

Зайдите сюда откройте консоль и посмотрите журнал.

...