在Angular中访问ng-template的内部组件

时间:2018-02-08 10:01:31

标签: angular typescript primeng

我在模态组件(https://www.primefaces.org/primeng/#/fileupload)中使用来自primeng(https://ng-bootstrap.github.io/#/components/modal/examples)的fileUpload组件

当我选择文件并通过ng-template显示时,我想要一个删除某些文件的按钮。

为了做到这一点,我需要从FileUpload组件中调用remove方法。

我的问题是这不起作用。

我最初尝试使用ViewChild,但得到undefined。我不能用户服务,因为这意味着我需要更新包。

代码

<ng-template #upload let-c="close" let-d="dismiss">
    <p-fileUpload #fileUpload
                    customUpload="true"
                    (uploadHandler)="uploadMultiHandler($event)"
                    (onSelect)="onFileSelect($event)"
                    multiple="multiple"
                    accept="image/*"
                    maxFileSize="1000000"> 
        <ng-template let-file pTemplate="file">
          <div class="ui-fileupload-row">
            <div><img [src]="file.objectURL" width="50"/></div>
            <div>{{file.name}}</div>
            <div>{{formatSize(file.size)}}</div>
            <div><button type="button" icon="fa-close" pButton (click)="remove(event, file)"></button></div>
          </div>
        </ng-template>
        <ng-template pTemplate="content">
          <ul *ngIf="uploadedFiles.length">
            <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
          </ul>
        </ng-template>    
      </p-fileUpload>
</ng-template>

@ViewChild('fileUpload') fileUpload: FileUpload;

remove(event: Event, file: any) {
    const index: number = this.uploadedFiles.indexOf(file);
    this.fileUpload.remove(event, index);
}

有没有人有任何想法? 我做错了什么?

我检查过的链接:

  1. Angular Access inner component of ng-template
  2. https://angular.io/guide/component-interaction
  3. http://plnkr.co/edit/p40g2xGgamfCUk8pShHq?p=preview
  4. https://plnkr.co/edit/xrv8Ye5c7p3h9kCgSWjD?p=preview
  5. https://github.com/angular/angular/issues/14842

0 个答案:

没有答案