Javascript 角度2，如何将选项从父组件传递到子组件？

我一直在寻找解决这个问题的方法。我已经尝试了@Input、@Query、dynamicContentLoader、@Inject、@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};
    }
}

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}
    }
}

从'angular2/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
指令：[儿童]，
模板：``
})
导出类父类
{
私人选择：任何；
构造函数（）
{
this.options={parentThing:true}；
}
}

child.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};
    }
}

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}
    }
}

从'angular2/core'导入{Component}；
@组成部分({
选择器：“父组件”，
模板：``
})
导出类子类
{
构造函数（private options:any）父到子是最简单的形式，但它在构造函数中不可用，仅在
ngOnInit（）
（或更高版本）中可用

这只需要在子组件中使用
@Input（）someField；
，并使用绑定将其从父组件传递给子组件。父组件中的更新在子组件中更新（而不是在另一个方向）

@组件({
选择器：'子组件'，
模板'someValueFromParent:{{someValueFromParent}}'
})  
类子组件{
@Input（）someValueFromParent:string；
恩戈尼尼特（）{
console.log（this.someValue）；
}
}
@组成部分({
选择器：“父组件”，
模板：“”
})
类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';
}

@Injectable（）
类共享服务{
someValue：字符串；
}
@组成部分({
选择器：'子组件'，
模板：“someValueFromParent:{{someValueFromParent}}”
})  
类子组件{
构造函数（私有共享服务：共享服务）{
this.someValue=sharedService.someValue；
}
someValue:string='abc'；
}
@组成部分({
选择器：“父组件”，
提供者：[共享服务]，
模板：“”
})
类ParentComponent{
构造函数（私有共享服务：共享服务）{
sharedService.someValue=this.someValue；
}
someValue:string='abc'；
}

更新

没有太大区别。对于DI，只能使用构造函数。如果您想要注入某些内容，则必须通过构造函数。
ngOnInit（）
由Angular在进行其他初始化（如正在处理的绑定）时调用。例如，如果您进行网络调用，则在
ngOnInit
中的构造函数中执行该操作并不重要，因为对服务器的调用将安排在稍后进行（异步）。当前同步任务完成后，JavaScript将查找下一个计划任务并对其进行处理（依此类推）因此，在构造函数中启动的服务器调用可能实际上是在
ngOnInit（）之后发送的。
无论您将其放置在何处。
您可以使用
@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);
  }
}

如果要实现自定义事件：子级触发事件并通知父级寄存器。使用
@Output
简单绑定有什么问题？
@Input（）
在child和
中，我已经多次看到这一点。这很有可能是解决方案。问题在于，无论出于何种原因，我都不明白如何将所有内容连接在一起。我曾一度在@Input上乱搞过一段时间。但我想我很难对所有发生的隐式内容以及如何处理这些隐式内容进行思考基本上我已经尝试了所有这些..
@Input、@Query、dynamicContentLoader、@Inject、@Inject（forwardRef）（）
但我还没能让他们做我想做的事情。所以我不是说他们做不到。但我或多或少地最小化了我的问题，以显示我试图实现的最终结果的类型。其中之一可能就是解决方案。刚才看到了，为什么您需要在构造函数中提供它们？请参阅我更新的答案，但为什么您需要在e constructor？谢谢你的回复，我在发帖之前已经试过了。我只是再次尝试验证。
这个。选项
返回为未定义。对不起，我向后看了一下。我看到你发帖的答案基本上与@Gunter相同。但是我不得不接受一个。所以我选择了他，因为他对
co的解释很好nstuctor（）
vs
ngOnInit（）
以及在
constructor（）
中访问信息的替代解决方案（如果需要）。不过感谢您的回复！我很抱歉将此内容拖出来。您能详细说明
ngOnInit（）
与
constructor（）之间的区别（或知道任何好的资源）吗
我的所有组件都需要构造函数吗？谢谢你的解释和回答。这消除了我的很多困惑。这也解释了为什么
@Input（）
在构造函数中不起作用。
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};
  }
}