Question

我能够通过模板绑定（在ngInit上）将数据从父级传递到子级。但是当它在父组件上更新时，我如何共享相同的数据。是否可以观察到（从父项到子项）共享更新的数据而不涉及服务？

我尝试使用 <child-template *ngIf='data' [data]='data'></child-template>

但是我想看起来像是将数据共享给子组件的可观察概念。

Answer 1

ChildComponent

中的

@Output

// ChildComponent 
@Output() OutputEvent: EventEmitter<string> = new EventEmitter();

// trigger the event to 'emit' the output event
onClick(): void {
    this.OutputEvent.emit('the string to be emitted');
}

ParentComponent

// ParentComponent view
<child-component (OutputEvent)="receiveValue($event)">

// ParentComponent controller
receiveValue($event){
    // $event is from ChildComponent = 'the string to be emitted'
}

大枪支

有时更新不会如您所愿。刷起ngOnChanges来监视更新。

ngOnChanges(changes: SimpleChanges) {
    if ('varName' in changes) {
        // console.log(this.varName);
        // console.log(changes.varName.previousValue);
        // console.log(changes.varName.firstChange); // etc
    }
}

双向数据绑定

我远离它。 I've asked questions关于这一点，似乎也没人知道如何在父级中观察其更改。

如果您认为需要2WDB，请考虑利用服务通过可观察的模式同步数据。

已验证的问题： 该问题已澄清给父母与孩子沟通。这更容易。仅使用@Input即可为子组件传递一个在父视图中具有简单数据绑定的值。

ChildComponent

// This property is bound using its original name.
@Input() bankName: string;

// this property value is bound to a different property name
// when this component is instantiated in a template.
@Input('originator') bankName: string;

ParentComponent视图

<child-component [bankName]="parentComponentClassVariable"></child-component>
or send a string
<child-component [bankName]="'some string here'"></child-component>

Answer 2

在父级中更新子级中的子项时的角度更新数据。您需要更改对象的链接（reassiagn数据，创建新对象）。如果您需要检测更改，请使用ngOnChanges生命周期挂钩

Answer 3

这是使用属性绑定从子组件更新父val属性的简单方法。通过这种方法，我们在父母中没有任何方法或侦听器来侦听孩子发出的事件。

父组件

 import {Component} from '@angular/core'


  @Component({
    selector:'parent-component',
    templateUrl:`<child-component [(value)]="val"> </child-component>        
                <span> {{ val }}  </span>`,
    styles:[]
  })


  class ParentComponent {
    public val:string = ""; 
  }

子组件

  import {Component,Input,Output,EventEmitter} from '@angular/core'

  @Component({
    selector:'child-component',
    templateUrl:`<input type="text" [value]="value" (input)="updateChange($event.target.value)"/>`,
    styles:[]
  })

  class ChildComponent{

    @Input() value:string;
    //The change suffix is most important in @output function 
    @Output() valueChange:EventEmitter<string> = new EventEmitter<string>()

     updateChange(value){
        this.value = value
        this.valueChange.emit(value)
      }
  }

如何将数据从父级数据更新为子级数据传递

3 个答案: