ng2:相当于require

时间:2016-06-02 21:38:36

标签: angular angular2-directives

在角度1.x中,我们可以通过在指令内要求它来引用父控制器。但是,由于整个命名切换为角度2,我似乎无法找到相应的功能?

到目前为止我尝试过的事情:

  • 我看到的一种方式是将@输入父母进入孩子,但这似乎有点多。
  • 我看到的另一种方式是使用服务,但这给了我一定的恐惧,据我所知,服务仍然是单身,所以其他组件现在可能搞乱了不同组件的孩子的东西(如果那样的话)孩子参考了服务)...
  • 最后它使用了这些局部变量的东西(带有#标签的东西),但它看起来与输入的第一个选项相同。

1 个答案:

答案 0 :(得分:7)

我不太了解Angular1,因此我无法确定require究竟做了什么或者用于什么目的。

你问题中提到的子弹:

  • 通常使用模板绑定来连接父级和子级

父模板

<child [childInput]="parentValue" (childOutput)="doSomethingInParent()">
  • 服务是每个提供商的单身人士。相同的提供程序将始终返回相同的实例,但您可以多次提供相同的服务,然后它不再是真正的单例。因此,您提供服务的位置定义了将其视为单例的范围。当您在组件上提供它时,此组件实例和所有子组件将获得相同的实例(只要子项不提供相同的类型)。

此DI行为可以防止您在问题中提到的冲突。

  • 模板变量用于指代兄弟姐妹
<child1 [child1Input]="child2.child2Prop" 
    (child1Output)="child2doSomethingInChild2()">
<child2 #child2></child2>
  • 如果您知道父组件的类型,则可以要求将其注入子组件的构造函数
constructor(@Host() private parent:ParentComponent) {}

在递归组件(如树)中,这可能特别方便,因为它知道父级是什么。在这种情况下,可能需要额外的装饰器

constructor(@Optional() @SkipSelf() @Host() private parent:ParentComponent) {}

哪里

  • @Optional()用于避免异常的根组件,因为没有相同类型的父级要注入
  • @SkipSelf()避免组件本身被注入,因为它与它实际想要注入的父类型相同。 DI总是从组件本身开始查找提供商。

另见Inject parent component of the same type as child component