方法1：模板变量

Question

我有以下设置：

--Users
  --User Table Component
  --User Filtering State

当我转到Users时，我可以看到组件User Table Component。我试图从User Filtering State的状态访问该组件中的某个对象。

有什么想法吗？

Answer 1

方法1：模板变量

一种方法是使用template variables。 <some-component #someName>创建一个someName变量，其中包含对SomeComponent组件的引用，此变量可以在绑定中引用：

@Component({
  selector: 'sibling1',
  template: `sibling1`)}
class Sibling1 {
  @Input() sib1Input;
  sib1Property:string = 'somevalue';
}

@Component({
  selector: 'sibling2',
  template: `sibling2`)}
class Sibling1 {
  @Input() sib2Input;
  sib2Property:string = 'somevalue';
}

@Component({
  selector: 'parent',
  directives: [Sibling1, Sibling2],
  template: `
<sibling1 #sib1 [sib1Input]="sib2.sib2Property"></sibling1>
<sibling2 #sib2 [sib2Input]="sib1.sib1Property"></sibling2>`)}
class Parent {
}

方法2：共享服务

另一种方法是使用如在中所示的共享服务 - Delegation: EventEmitter or Observable in Angular2

简化版本（没有可观察的）。有关如何使用observable获取有关更改的通知，请参阅链接的答案。

@Injectable() 
class SharedService {
  someValue:string;
}

@Component({
  selector: 'sibling1',
  template: `sibling1`)}
class Sibling1 {
  constructor(private sharedService:SharedServcie) {}

  clickHandler() {
    sharedService.someValue = 1;
  }
}

@Component({
  selector: 'sibling2',
  template: `sibling2
    <div>value from sibling1: {{sharedService.someValue}}</div>
`)}
class Sibling1 {
  constructor(private sharedService:SharedServcie) {}
}

将SharedService添加到providers Parent会使其自身共享，并将其后代（将其添加到bootstrap(AppComponent, [SharedService])会使其与整个应用程序全局共享）< / p>

@Component({
  selector: 'parent',
  directives: [Sibling1, Sibling2],
  providers: [SharedService], 
  template: `
<sibling1></sibling1>
<sibling2></sibling2>`)}
class Parent {
}

Answer 2

您无法直接访问此类组件的属性。如果要在组件之间进行通信，可以使用共享服务。

它可以包含要订阅的数据和可观察数据，以便在更新数据时得到通知。

以下是一个示例：

<强>服务

export class SharedService {
  list1Event: EventEmitter<any> = new EventEmitter();

  getLists() {
    return this.http.get(url).map(res => res.json())
      .subscribe(
        (data) => {
          this.list1Event.emit(data.list1);
        }
      );
  }
}

<强>组件

@Component({
  selector: 'my-component1',
  template: `
    <ul>
     <li *ngFor="#item of list">{{item.name}}</li>
    </ul>
  `
})
export class MyComponent1 {
  constructor(private service:ListService) {
    this.service.list1Event.subscribe.(data => {
      this.list = data;
    });
  }
}

<强>自举

bootstrap(AppComponent, [ SharedService ]);

有关详细信息，请参阅此问题：

如何从兄弟状态访问数据？

2 个答案:

方法1：模板变量

方法2：共享服务