Angula6 ViewChild in @ng-bootstrap/ng-bootstrap NgbModalModule modal returns undefined

问题

I am successfully using ng bootstrap and specifically the modal module to show a modal form. It is a contact form that has email and message input fields and a submit button. The ngbootstrap module I am using is https://ng-bootstrap.github.io/#/components/modal/examples this shows fine. What I am trying to do is that when user clicks on the 'send' button (see template code below) the button will become disabled and say 'sending...'. In other words I'm trying to manipulate the properties view the modal component.

I have already looked at the following questions but none of the suggestions work:

Angular 2 @ViewChild annotation returns undefined How to get reference of the component associated with ElementRef in Angular 2

However no matter what, I get 'undefined' when I try to use in my component

@ViewChild('submitButton') submitButton: ElementRef;

along with this html in my template

<button #submitButton
   id="submitButton"
   class="btn btn-success w-100"
   [disabled]="!contactForm.valid"
>Send</button>

Here is the full component code (the place where I am trying to access the submitButton is in method onSubmit()):

import {
    Component,
    OnInit,
    Renderer2,
    ViewChild,
    ElementRef,
    AfterViewInit
} from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

import { ContactService } from '../../services/contact.service';

@Component({
    selector: 'app-contact-modal',
    templateUrl: './contact-modal.component.html'
})
export class ContactModalComponent implements OnInit, AfterViewInit {

    closeResult: string;
    contactForm: FormGroup;
    //@ViewChild('submitButton') submitButton;
    @ViewChild('submitButton') submitButton: ElementRef;

    constructor(
        private modalService: NgbModal,
        private contactService: ContactService,
        private renderer: Renderer2
    ) { }

    ngOnInit() {
        this.initForm();
    }

    ngAfterViewInit() {
        console.log(this.submitButton);
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
          return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
          return 'by clicking on a backdrop';
        } else {
          return  `with: ${reason}`;
        }
    }

    private initForm() {
        const email = '';
        const message = '';

        this.contactForm = new FormGroup({
            email: new FormControl(null, Validators.email),
            message: new FormControl(null, Validators.required)
        });
    }

    onSubmit() {

        const email = this.contactForm.value.email;
        const message = this.contactForm.value.message;

        // at this point this.submitButton is UNDEFINED
        console.log(this.submitButton);

        //this.submitButton.nativeElement.style.backgroundColor = 'black';

        this.contactService.sendContactRequest(email, message, (submitSuccess: boolean) => {
            if (submitSuccess) {

                console.log('SUCCESS UPDATE UI');
                this.contactForm.value.email = '';
                this.contactForm.value.message = '';

            } else {
                console.log('ERROR update UI');
            }
        });
    }

    open(content) {
        console.log('in open func');
        this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})
        .result
        .then(
            (result) => {
                console.log(`Closed with: ${result}`);
            },
            (reason) => {
                console.log(`Dismissed ${this.getDismissReason(reason)}`);
            }
        );
    }
}

Here is my full template:

<a
    class="nav-link"
    (click)="open(content)"
><i class="fas fa-envelope"></i></a>

<ng-template #content let-c="close" let-d="dismiss">

    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Contact Us</h4>
        <button type="button" class="close" aria-label="Close" (click)="c()">
          <i class="fas fa-times"></i>
        </button>
    </div>

    <div class="modal-body">

        <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">

            <div class="row justify-content-center">

                <div class="col-md-12 col-sm-12">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input
                            type="text"
                            class="form-control"
                            id="email"
                            formControlName="email"
                        >
                    </div>
                </div>

            </div>

            <div class="row justify-content-center">

                <div class="col-md-12 col-sm-12">
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea
                            type="text"
                            class="form-control"
                            id="message"
                            formControlName="message"
                            rows="6"
                        ></textarea>
                    </div>
                </div>

            </div>

            <div class="row justify-content-center">

                <div class="col-md-12 col-sm-12">
                    <button #submitButton
                        id="submitButton"
                        class="btn btn-success w-100"
                        [disabled]="!contactForm.valid"
                    >Send</button>
                </div>

            </div>

            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div *ngIf="sentMessage" class="alert alert-success" role="alert">
                        {{ sentMessage }}
                    </div>
                </div>
            </div>

        </form>

    </div>

</ng-template>

Any help is greatly appreciated.

来源：https://stackoverflow.com/questions/51959167/angula6-viewchild-in-ng-bootstrap-ng-bootstrap-ngbmodalmodule-modal-returns-und