Angular 2，如何将选项从父组件传递给子组件？

Question

我一直在寻找一个解决方案。我已经试过了一堆从@input，@Query，dynamicContentLoader，@注入，@Inject（forwardRef（（）不同的事情，但一直没能还没有想出解决办法

我的例子结构：

parent.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector : 'my-app', 
    directives : [Child], 
    template : `<parent-component></parent-component>` 
}) 

export class Parent 
{ 
    private options:any; 

    constructor() 
    { 
     this.options = {parentThing:true}; 
    } 
} 

child.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector : 'parent-component', 
    template : `<child-component></child-component>` 
}) 

export class Child 
{ 
    constructor(private options:any) <- maybe I can pass them in here somehow? 
    { 
     // what I am trying to do is get options from 
     // the parent component at this point 
     // but I am not sure how to do this with Angular 2 
     console.log(options) <- this should come from the parent 

     // how can I get parent options here? 
     // {parentThing:true} 
    } 
} 

这是DOM我目前的HTML输出，所以这部分工作正常

<parent-component> 
    <child-component></child-component> 
</parent-component> 

问题概括为：

如何传递从父组件选项的子组件和有那些在子构造函数中可用的选项？

Answer 1

父母对孩子是最简单的形式，但它在构造函数中不可用，仅在ngOnInit()（或更高版本）中可用。

这只需要子组件中的@Input() someField;，并使用绑定，这可以从父项传递给子项。在父更新的孩子（而不是其他方向）

@Component({ 
    selector: 'child-component', 
    template'<div>someValueFromParent: {{someValueFromParent}}</div>' 
}) 
class ChildComponent { 
    @Input() someValueFromParent:string; 

    ngOnInit() { 
    console.log(this.someValue); 
    } 
} 

@Component({ 
    selector: 'parent-component', 
    template: '<child-component [someValueFromParent]="someValue"></child-component>' 
}) 
class ParentComponent { 
    someValue:string = 'abc'; 
} 

有它可用在构造函数中使用共享服务进行更新。共享服务被注入到这两个组件的构造函数中。为了注入工作，服务需要在父组件或以上但不在儿童中注册。这种方式都获得相同的实例。 在父项中设置一个值并在客户端中读取它。

@Injectable() 
class SharedService { 
    someValue:string; 
} 

@Component({ 
    selector: 'child-component', 
    template: '<div>someValueFromParent: {{someValueFromParent}}</div>' 
}) 
class ChildComponent { 
    constructor(private sharedService:SharedService) { 
    this.someValue = sharedService.someValue; 
    } 
    someValue:string = 'abc'; 
} 

@Component({ 
    selector: 'parent-component', 
    providers: [SharedService], 
    template: '<child-component></child-component>' 
}) 
class ParentComponent { 
    constructor(private sharedService:SharedService) { 
    sharedService.someValue = this.someValue; 
    } 
    someValue:string = 'abc'; 
} 

更新

没有太大的区别。对于DI，只能使用构造函数。如果你想注入某些东西，它必须通过构造函数。当发生额外的初始化时（如正在处理的绑定），Angular将调用ngOnInit()。例如，如果您拨打网络电话，则在ngOnInit的构造函数中执行此操作并不重要，因为调用服务器的时间安排在稍后（异步）。当前同步任务完成后，JavaScript查找下一个计划任务并处理它（等等）。因此，无论您将它放在哪里，在构造函数中启动的服务器调用实际上都可以在ngOnInit()之后发送。

Answer 2

你可以使用一个@Input参数：

import {Component,Input} from 'angular2/core'; 

@Component({ 
    selector : 'parent-component', 
    template : `<child-component></child-component>` 
}) 
export class Child { 
    @Input() 
    options:any; 

    ngOnInit() { 
    console.log(this.options); 
    } 
} 

注意的options值是在ngOnInit可用的，而不是在构造函数中。看一看组件的生命周期挂钩的详细信息：

• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

，并提供选项，如下描述下：

import {Component} from 'angular2/core'; 

@Component({ 
    selector : 'my-app', 
    directives : [Child], 
    template : `<parent-component [options]="options"></parent-component>` 
}) 
export class Parent { 
    private options:any; 

    constructor() { 
    this.options = {parentThing:true}; 
    } 
} 

如果要实现自定义的事件：孩子触发器一个事件和父注册将被通知。使用@Output。