Question

Angular 2中可以将Component仅限制为页面上的特定父元素。换句话说，如果存在某个父元素，则仅允许页面上的Component。使用案例：

应该可以：

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

不应该（没有<parent>标记作为父级）

<child></child>

我需要转换父Component并且<child>标记是可选的，因此我无法执行：

@Component({
  /*...*/
  selector: 'parent',
  template: `<child></child>`
});

有什么想法吗？

Answer 1

这样的事情应该可以解决问题。

父组件：

@Component({
  selector: 'parent',
  template: '<ng-content></ng-content>'
})

export class ParentComponent {

}

子组件：

@Component({
  selector: 'child',
  template: ''
})
export class ChildComponent {
  constructor(parent: ParentComponent){
    // will throw a no provider error if parent is not set
  }
}

然后您可以按照自己的意愿使用您的组件：

<parent><child></child></parent> <!-- works -->
<child></child> <!-- fails -->

请注意，当您在子项中注入父项时，该子项实际上可能是该子项，而不会抛出错误。

Angular 2 - 将组件限制为特定的父组件

1 个答案:

父组件：

子组件：