Question

假设我有两个组件，<child>和<parent>，并且我想在运行时断言在父组件中使用了子组件，如下所示：

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

我该怎么做？我曾尝试通过子代的构造函数将父代注入子代并断言其存在，但由于父母也需要引用该子代，因此我收到了循环依赖性错误。

Answer 1

您可以使用following syntax注入子组件的主机：

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);
   }
}

有关演示，请参见this stackblitz。

如果您希望Angular在找不到合适的父组件时抛出异常，请删除@Optional装饰器：

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

有关演示，请参见this stackblitz。

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 !');
  }
}

断言一个组件只能用作另一个组件的子代

2 个答案: