Question

我创建了名为app-inline-edit的组件，它应该像这样使用：

<app-inline-edit (onSave)="saveEditCheck($event)">
    <app-select formControlName="CurrentCar" [options]="carOptions"></app-select>
</app-inline-edit>

默认情况下，它应显示＆＃34; CurrentCar＆＃34;作为普通字符串旁边有铅笔图标。如果用户点击字符串或图标，它应该呈现＆＃34; app-select＆＃34;带有两个图标的组件：一个用于保存更改，另一个用于丢弃它们。

编辑： app-inline-edit的孩子并不总是app-select，它也可以是不同的组件。这是我的模板：

<div>
  <div *ngIf="editing">
    <div #inlineEditControl class="inline-edit-input">
      <ng-content></ng-content>
    </div>
    <i class="fa fa-check" aria-hidden="true" (click)="save()"></i>
    <i class="fa fa-times" aria-hidden="true" (click)="discard()"></i>
  </div>
  <div *ngIf="!editing">
    <div title="Click to edit" (focus)="edit(value);" tabindex="0" class="inline-edit">
        {{value}}&nbsp;<i class="fa fa-pencil" aria-hidden="true" (click)="edit(value)"></i>
    </div>
  </div>
</div>

我试图通过

访问它

@ViewChild('inlineEditControl') inlineEditControl: ElementRef;

但editing为false时inlineEditControl为undefined。我遇到的问题是。如何访问附加到＆＃34; app-select＆＃34;的选定值（CurrentCar）？如果默认情况下选择不呈现？它甚至可能吗？

Answer 1

您应该使用@ViewChild

在您的组件中

@ViewChild<AppSelectComponent> appSelectComponent: AppSelectComponent;

this.appSelectComponent.options /////////////// have it here


<app-select formControlName="CurrentCar" [options]="carOptions"></app-select>

如何从子组件访问数据？ Angular2

1 个答案: