Angular4：NG-模板内部组件参考

我是新来的角4. 我想NG-模板内部组件的手柄（确认的警报）Angular4：NG-模板内部组件参考

<ng-template #content let-c="close" let-d="dismiss" size="600px" > 
    <validation-alerts [formGroup]="requestTypeForm"></validation-alerts> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix head" tabindex="-1"> 
     <span id="ui-id-6" class="ui-dialog-title popup-title">Client Name Look Up </span> 
     <button (click)="d('Cross click')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" 
     role="button" aria-disabled="false" title="Close"> 
     <span class="ui-button-icon-primary ui-icon ui-icon-closethick popup-close-icon"></span><span class="ui-button-text">Close</span> 
     </button> 
    </div> 
    <form (ngSubmit)="onSubmit()" [formGroup]="requestTypeForm"> 
    <div id="scrollContainer-popup" class="popup ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: auto; display: block; padding: 0px 10px 0px"> 
     <div class="body"> 
      <p class="mb"><b>Select the matching client name:</b></p> 
      <input type="text" formControlName="clientId" name="clientId" 
        id="clientId" style="width:30%" /> 

      <div class="btnBar nbdr" style="padding-top: 0px;" > 
       <a (click)="c('close')" class="btn3"><span>Cancel</span></a>  
       <button type="button" class="btn" (click)="c('submit')">Select</button> 
      </div> 
     </div> 
    </div> 
    </form> 
</ng-template>

我试着用@ViewChild，@ ViewChildren，但在AfterContentInit方法中获取未定义。

@ViewChild(ValidationAlertsComponent) 
    private validationAlerts: ValidationAlertsComponent;

组件类

@Component({ 
    selector: 'provision-modal', 
    templateUrl: 'provision.modal.html', 
    encapsulation: ViewEncapsulation.None, 
    styles : [ '.namelookup .modal-content { width: 600px;}'] 
}) 
export class ProvisionModal implements AfterContentInit { 
    @ViewChild('content') contentTemplate: TemplateRef<any>; 

    @ViewChild(ValidationAlertsComponent) 
    private validationAlerts: ValidationAlertsComponent; 

    ngAfterContentInit() { 
    console.log('Ng after content init '+ this.validationAlerts); 
    }

来源

2017-08-14 Ash K

发布更多的组件类代码，请 – Vega

组件类代码添加 –

validationAlerts即将为未定义 –

您应该ngAfterViewInit生命周期挂钩后访问视图的孩子。

见https://angular.io/guide/lifecycle-hooks

因此改变

ngAfterContentInit() { 
    console.log('Ng after content init '+ this.validationAlerts); 
}

到

ngAfterViewInit() { 

}

来源

2017-11-08 03:07:40

Angular4：NG-模板内部组件参考

回答

相关问题