Утверждение, что компонент может использоваться только как дочерний элемент другого компонента

Question

Предположим, у меня есть два компонента, <child> и <parent>, и я хочу во время выполнения утверждать, что дочерний компонент используется в родительском компоненте следующим образом:

<parent>
  <child></child>
</parent>

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

Answer 1

Вы можете внедрить хост дочернего компонента с помощью следующего синтаксиса :

import { Component, Optional, Host, Inject, forwardRef } from '@angular/core';
import { ParentComponent } from './parent.component';

...
export class ChildComponent {
  constructor(@Optional() @Host() @Inject(forwardRef(() => ParentComponent)) parent) {
    console.log("Has valid parent:", !!parent);
   }
}

См. этот стек для демонстрации.

Если вы хотите, чтобы Angular генерировал исключение, когда соответствующий родительский компонент не найден, удалите декоратор @Optional:

constructor(@Host() @Inject(forwardRef(() => ParentComponent)) parent) {
  console.log("Has valid parent!");
}

См. этот стековый блик для демонстрации.

Answer 2

Вы можете использовать цепочку element.parentElement.tagName для получения прямого родителя элемента:

const children = [...document.querySelectorAll('child')];

children.forEach(child => {
  child.addEventListener('click', event => {
    if (event.target.parentElement.tagName.toUpperCase() !== 'PARENT') {
      throw new Error('Child not in parent !');
    }
  });
});

<parent>
  <child>Click on me to check if I am in my parent</child>
</parent>

<div>
  <child>Click on me to check if I am in my parent</child>
</div>

В случае Angular это даст

constructor(el: ElementRef<HTMLElement>) {
  if (el.nativeElement.parentElement.tagName.toUpperCase() !== 'APP-PARENT') {
    throw new Error('Child not in parent !');
  }
}