Question

这是我的观点部分：

<div>
  <div class="customer">
    <customer></customer>
    </div>
    <div class="addressAndPhases">
      <address></address>     
  </div>
</div>

客户组件从服务器获取客户数据和地址数据。

CustomerComponent

export class CustomerComponent extends SuperChildComponent {
  public static url: string = 'orderViewCustomer';
  public id;
  public allowed: boolean = false;
  public accessLevel: AccessLevel = null;
  public componentname: string;
  public customerData: Customer = null;

  constructor(private rest: REST, private authenticationService: AuthorizationService) {
    super();
    this.componentname = this.constructor.name;
    this.accessLevel = this.authenticationService.isUserLoggedIn() ? this.authenticationService.componentAccessLevel(this.constructor.name) : null;
    console.log(this.constructor.name + ' has ' + this.accessLevel);
    if (this.accessLevel == AccessLevel.ENABLED) {
      this.getData();
    }
  }

  private getData(): any {
     this.rest.get(CustomerComponent.url,this.id).subscribe(data=> this.storeData(data.json()), err => console.log(err) ,()=> this.accessLevel==AccessLevel.DISBLED);

  }



  private storeData(res: Object): any {
    this.customerData =<Customer>res;

  }


}
class Customer {
  id: string = null;
  oldId: string = "";
  firstName: string = "";
  lastName: string = "";
  email: string = "";
  addressLine1: string = "";
  addressLine2: string = "";
  addressLine3: string = "";
  street1: string = "";
  street2: string = "";
  postalCode: string = "";
  city: string = "";
  title: string = "";
  gender: string = "";

}

现在在地址组件中我想使用组件数据中的一些数据，如下所示：

<div [ngSwitch]="accessLevel">
  <div class="addressAndPhases"  *ngSwitchCase="'ENABLED'">
    <h2 class="label">Address</h2><br>
    <span>{{addressData.addressLine1}}</span><br>
    <span>{{addressData.email}}</span>
  </div>
</div>

这就是我在尝试哪种方式不正确。

AddressComponent

export class AddressComponent implements OnInit {

 public customer:CustomerComponent;
 public addressData;
  constructor() { 
    this.addressData=this.customer.customerData;

  }

问题：我不知道如何将数据从Customer组件传递到地址组件。

我可以将客户组件注入地址组件的构造函数吗？

请提供您的意见。感谢

Answer 1

我认为你正在寻找@input和@output装饰器;和EventEmitter类。请在component interaction documentation。

中详细了解相关信息

您也可以使用共享服务执行此操作。

用于数据交换/使用的两个不同组件之间的通信：Angular 2

1 个答案: