Question

如何与Angular dart中的同级组件共享数据

如何在同级组件之间动态共享数据你能举个例子解释一下吗？

谢谢。

Answer 1

您可以使用由父组件或另一个公共祖先提供的共享服务，将其注入两个组件中并用作中介，例如通过流主动通知状态更改。
您还可以在传递给两者的父组件中使用一个字段

<sibling1 [data]="dataInParent"></sibling1>
<sibling2 [data]="dataInParent"></sibling1>

您可以在父组件的模板中引用使用引用

<sibling1 #foo1></sibling1>
<sibling2 [data]="foo1.data"></sibling1>

Answer 2

<comp-root>
  <comp-a #foo ></sibling>
  <comp-b [data]="foo.passData()"></sibling>
</comp-root>

@Component(
  selector: 'comp-root',
  styles: [],
  template: '''
  <comp-a #foo ></sibling>
  <comp-b [data]="foo.passData()"></sibling>
''',
)
Class CompRoot {
    // do someting...


}

@Component(
  selector: 'comp-a',
  styles: [],
  template: ''' <a (click)="changeA()"> click 1</a> <a (click)="changeB()"> click 2</a> ''',
)
Class CompA {
  String pData;

  @Output
  String passData() => pData

  void changeA() => pData = 'Staf-1';
  void changeB() => pData = 'XYZ';
}

@Component(
  selector: 'comp-b',
  styles: [],
  template: ''' {{data}} ''',
)
Class CompB {

  @Input
  String data;

}

我如何在Angular Dart的同级组件之间共享数据

2 个答案: