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

Question

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

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

我该怎么做？我试图通过子构造函数将父项注入(inject)子项并断言其存在，但我遇到了循环依赖错误，因为父项也需要对子项的引用。

Answer 1

您可以使用 following syntax 注入(inject)子组件的主机。 :

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用于演示。