Question

我试图访问子组件中的DOM以便自动提交表单，我尝试使用viewChild，但它始终返回undefined。

我的路线看起来很像，为了访问子组件，必须提供有效的令牌。

   const routes: Routes = [{
         path: '',
         redirectTo: '',
         pathMatch: 'full'
     },
     {
         path: 'auth',
         children: [{
                 path: '',
                 loadChildren: 'app/auth/auth.module#AuthModule'

             },
             {
                 path: ':token/:id',
                 loadChildren: 'app/token/token.module#TokenModule',
                 canActivateChild: [AuthGuardService]
             }

         ]
     }
 ];

App.html

   <nav>
    <a routerLink="auth">Auth</a>
</nav>


<router-outlet></router-outlet>

子组件

@ViewChild('payForm') PayForm: ElementRef;

    ngOnInit() {
        this.route.params
            .switchMap((params: Params) => this.getId(params.id))
            .subscribe((res) => {
                this.loading = false;
                this.paymentRq = res.paramForm;
                console.log(this.paymentRq);
                this.appRef.tick(); // fill the form 
                this.urlForm = this.domSanitizer.bypassSecurityTrustUrl(res.urlPaymentForm);
                console.log('form' + this.urlForm);
                console.log(this.PayForm) // always return undefined !!

            }, error => {
                console.log(error);
            });

    }

ChildComponent.html

 <ng-template >
   <form method="post"  #payForm [action]="urlForm" >
     <input type="hidden" name="version" [ngModel]="paymentRq.version"/>
     <input type="hidden" name="merchantID" [ngModel]="paymentRq.merchantId"/>
     <input type="hidden" name="merchantSiteID" [ngModel]="paymentRq.merchantSiteId"/>
     <input type="hidden" name="paymentOptionRef" [ngModel]="paymentRq.paymentOptionRef"/>
     <input type="hidden" name="orderRef" [ngModel]="paymentRq.orderId"/>
     <input type="hidden" name="orderTag" [ngModel]="paymentRq.orderTag"/>
     <input type="hidden" name="freeText" [ngModel]="paymentRq.freeText"/>
     <input type="hidden" name="decimalPosition" [ngModel]="paymentRq.decimalPosition"/>
     <input type="hidden" name="currency" [ngModel]="paymentRq.currency"/>
     <input type="hidden" name="country" [ngModel]="paymentRq.country"/>
     <input type="hidden" name="invoiceID" [ngModel]="paymentRq.invoiceId"/>
     <input type="hidden" name="customerRef" [ngModel]="paymentRq.customerId"/>
     <input type="hidden" name="date" [ngModel]="paymentRq.date"/>
     <input type="hidden" name="amount" [ngModel]="paymentRq.amount"/>
     <input type="hidden" name="orderRowsAmount" [ngModel]="paymentRq.orderRowsAmount"/>
     <input type="hidden" name="orderFeesAmount" [ngModel]="paymentRq.orderFeesAmount"/>
     <input type="hidden" name="orderDiscountAmount" [ngModel]="paymentRq.orderDiscountAmount"/>
     <input type="hidden" name="orderShippingCost" [ngModel]="paymentRq.orderShippingCost"/>
     <input type="hidden" name="allowCardStorage" [ngModel]="paymentRq.allowCardStorage"/>
     <input type="hidden" name="passwordRequired" [ngModel]="paymentRq.passwordRequired"/>
     <input type="hidden" name="merchantAuthenticateUrl" [ngModel]="paymentRq.merchantAuthenticateUrl"/>
     <input type="hidden" name="storedCardID1" value=""/>
     <input type="hidden" name="storedCardLabel1" value=""/>
     <input type="hidden" name="merchantHomeUrl" [ngModel]="paymentRq.merchantHomeUrl"/>
     <input type="hidden" name="merchantBackUrl" [ngModel]="paymentRq.merchantBackUrl"/>
     <input type="hidden" name="merchantReturnUrl" [ngModel]="paymentRq.merchantReturnUrl"/>
     <input type="hidden" name="merchantNotifyUrl" [ngModel]="paymentRq.merchantNotifyUrl"/>
     <input type="hidden" name="scoringToken" [ngModel]="paymentRq.scoringToken"/>
     <input type="hidden" name="hmac" [ngModel]="paymentRq.hmac"/>

     <button type="submit" ></button>
     </form>
 </ng-template>

谢谢。

Answer 1

通过删除＆＃34; ng-template＆＃34;模板未呈现。，我能够使它工作。感谢@Daniel W Strimpel

子组件中的Angular 5访问DOM始终返回undefined

1 个答案: