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-模板內部組件參考

回答

相關問題