角度代码

Question

我正在尝试使用ng2-bs3-modal的ModalComponent并构建一个用于确认，警报和提示的公共对话框。这是我的代码。我无法从调用自定义组件的父组件访问我的组件中定义的customModal变量。

// CustomModal.ts

import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
// import { , Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'custom-modal',
    encapsulation: ViewEncapsulation.None,
    template : './CustomModal.html'
})

export class CustomModal {
    @Input() primaryButtonLabel: string;
    @Input() secondaryButtonLabel: string;
    @Input() titleText: string;
    @Input() messageText: string;
    @Output() notify: EventEmitter<any> = new EventEmitter<any>();

    @ViewChild('customModal') customModal: ModalComponent;

    onCloseClick(event): void {
        this.close();
        this.notify.emit(event.target);
    }

     ngOnInit(): void {
         console.log('OnInit called');
     }
}

// CustomModal.html

<modal #customModal [closeOnOutsideClick]="false" class="modal1" (keyup.enter)="onCloseClick(event)">
    <modal-header>
        <h4 id="deleteOrgPopupTitle" class="modal-title text-xs-center fw-bold mt">{{titleText}}</h4>
    </modal-header>
    <modal-content>
    <h6 class="text-left">{{messageText}}</h6>
    </modal-content>
    <modal-footer>
        <div class="container text-center">
            <button id="primaryButton" type="button" class="btn btn--small btn--primary" (click)="onCloseClick(event)">{{primaryButtonLabel}}</button>
            <button id="secondaryButton" type="button" class="btn btn--small btn--primary" (click)='onCloseClick(event)'>{{secondaryButtonLabel}}</button>
        </div>
    </modal-footer>
</modal>

//它在哪里使用？ //DeleteBook.html

<custom-modal #deleteConfirm
    [primaryButtonLabel]='OK'
    [secondaryButtonLabel]='Cancel'
    [titleText]='titleText'
    [messageText]='messageText'>
</custom-modal>

// DeleteBook.ts

import { Component, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { BookService } from './book.service';
import { ErrorMessage } from '../shared/error-message/error-message';
import { CustomModal } from '../shared/CustomModal/CustomModal';

@Component({
    selector: '[ book-delete ]',
    template: require('./book-delete.html'),
    styles: [require('./book.scss')]
})

export class DeleteBook {

    titleText: string = 'Delete Confirmation';
    messageText: string = 'Are you sure to delete ' + this.bookName;
    @Output() notify: EventEmitter<any> = new EventEmitter<any>();
    @ViewChild('deleteConfirm') deleteConfirm: CustomModal;

    constructor(private bookService: BookService, private errorMessage: ErrorMessage) { }

    performDelete(): void {
        this.bookService.deleteBook(this.bookId).subscribe(
            data => {
                let eventData: any = {
                    type: 'book-delete',
                    success: true
                };
                this.notify.emit(eventData);
            },
            error => {
                error['entity'] = 'Book';
                error['entityName'] = this.bookName;
                this.errorMessage.getUIErrorText(error);
            });
        // ERROR HERE: this.deleteConfirm.customModal is not defined here.
        this.deleteConfirm.customModal.close(); // <<< HERE customModal returns null
    }

}

Answer 1

好吧，我认为这在代码中是一个愚蠢的语法错误。

更正：CustomModal.ts template : require('./custom-modal.html')

早些时候它是： template : './custom-modal.html'