Angular4：在构造函数中注入父组件 - 使其失败安全

Question

在网络的某个地方，我看到了一个关于在其中创建标签组件的教程，使用了这个非常简单的模式

// TABS COMPONENT

export class TabsComponent{
    tabs: TabItemComponent[];

    addTab(tab: TabItemComponent){
        this.tabs.push(tab);
    }
}

// TAB ITEM COMPONENT

export class TabItemComponent{
    constructor(private tabsComponent: TabsComponent){
        this.tabsComponent.addTab(this);
    }
}

// VIEW

<tabs>
    <tab-item>text 1</tab-item>
    <tab-item>Text 2</tab-item>
</tabs>

让父母注入孩子的真正凉爽和干净的模式

现在，当父视图在视图中实际存在时，这可以正常工作...非常适合标签...

对于ButtonGroupComponent和ButtonComponent场景来说不太完美，其中Button可以是独立的，不一定包含在Button组中

我有类似的模式，有例外

constructor(private buttonGroup: ButtonGroupComponent) {
  if (this.buttonGroup) {
    this.buttonGroup.addButton(this);
  }
}

但是，如果按钮是独立的，这不起作用，我收到一个错误：

  

错误错误：未捕获（承诺）：错误：没有提供商   ButtonGroupComponent！

如何防止构造函数中的错误？

Answer 1

您可以使用@Optional()修饰参数。请参阅the documentation。