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

Angular 2, How to pass options from parent component to child component?

本文关键字：组件 选项 Angular      更新时间：2023-09-26

我一直在寻找解决方案。我已经尝试了@Input，@Query，dynamicContentLoader，@Inject，@Inject（forwardRef（））的一系列不同的东西，但还没有弄清楚这一点。

我的示例结构：

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

这是我目前在DOM中的HTML输出，所以这部分按预期工作

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

问题总结：

如何将选项从父组件传递到子组件，并在子构造函数中提供这些选项？

父到子级是最简单的形式，但它在构造函数中不可用，仅在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()之后发送。

您可以使用

@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 .

相关文章：