Angular 如何在父级到子级之间更新数据

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

我试了一下模板

---

但这只传递了1次数据。如果父组件中的数据得到更新怎么办？

@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 view
<child-component (OutputEvent)="receiveValue($event)">

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

// 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;

双向数据绑定

我远离它。关于这一点，似乎没有人知道如何在父母身上观察其变化的答案

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

澄清问题： 这个问题已向家长与孩子的沟通澄清。这要容易得多。仅使用@Input，就可以通过父视图中的简单数据绑定向子组件传递一个值

ChildComponent

// 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 view
<child-component (OutputEvent)="receiveValue($event)">

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

// 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;

父组件视图

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

或者发送一个字符串

@子组件中的输出

// 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 view
<child-component (OutputEvent)="receiveValue($event)">

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

// 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;

双向数据绑定

我远离它。关于这一点，似乎没有人知道如何在父母身上观察其变化的答案

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

澄清问题： 这个问题已向家长与孩子的沟通澄清。这要容易得多。仅使用@Input，就可以通过父视图中的简单数据绑定向子组件传递一个值

ChildComponent

// 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 view
<child-component (OutputEvent)="receiveValue($event)">

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

// 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;

父组件视图

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

或者发送一个字符串

在父对象中更新时，子对象中的角度更新数据。您需要更改对象的链接（重新生成数据，创建新对象）。如果需要检测更改，请在父级中更新子级中的角度更新数据时，使用ngOnChanges lifecycle hook。您需要更改对象的链接（重新生成数据，创建新对象）。如果需要检测更改，请使用ngOnChanges lifecycle hook

这里有一个简单的方法，通过使用属性绑定从子组件更新父

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 = ""; 
  }

从'@angular/core'导入{Component}
@组成部分({
选择器：'parent-component'，
templateUrl:`
{{val}}`，
样式：[]
})
类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)
      }
  }

从'@angular/core'导入{Component，Input，Output，EventEmitter}
@组成部分({
选择器：'child-component'，
templateUrl:``，
样式：[]
})
类子组件{
@Input（）值：字符串；
//change后缀在@output函数中最重要
@输出（）值更改：EventEmitter=新的EventEmitter（）
更新更改（值）{
this.value=value
this.valueChange.emit（值）
}
}

---

下面是使用属性绑定从子组件更新父

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 = ""; 
  }

从'@angular/core'导入{Component}
@组成部分({
选择器：'parent-component'，
templateUrl:`
{{val}}`，
样式：[]
})
类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)
      }
  }

从'@angular/core'导入{Component，Input，Output，EventEmitter}
@组成部分({
选择器：'child-component'，
templateUrl:``，
样式：[]
})
类子组件{
@Input（）值：字符串；
//change后缀在@output函数中最重要
@输出（）值更改：EventEmitter=新的EventEmitter（）
更新更改（值）{
this.value=value
this.valueChange.emit（值）
}
}

---

看一看这里还有一个关于如何使用可观察物和受试者的解释看一看这里还有一个关于如何使用可观察物和受试者的解释你的答案是从孩子到父母共享数据。我正在寻找父母对孩子。很抱歉没有明确的问题。我正在寻找如何将更新的数据从父项传递到子项。事件在父级到子级之间是否有效？通过更简单的父级到子级通信进行更新。在我将数据传递给子级，并且父级中的数据发生更改后，我无法将更新的数据传递给子级…这是我的问题是，它将监视更改。我经常遇到这些问题。在角度上，让变化很好地同步是一个怪癖。如果组件间的通信大于2个来回设置，我将创建一个服务。您的答案是从子级到父级共享数据。我正在寻找父母对孩子。很抱歉没有明确的问题。我正在寻找如何将更新的数据从父项传递到子项。事件在父级到子级之间是否有效？通过更简单的父级到子级通信进行更新。在我将数据传递给子级，并且父级中的数据发生更改后，我无法将更新的数据传递给子级…这是我的问题是，它将监视更改。我经常遇到这些问题。在角度上，让变化很好地同步是一个怪癖。如果组件间的通信大于2个来回设置，我创建一个服务。孩子不需要发射任何东西。假设父对象将值发送给子对象，然后更新父对象值。但是孩子没有新的数据。孩子只有旧数据。这就是问题所在。子项如何从中获取更新的数据