自定義組件不能在角碼中訪問

我想使用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 
    } 

}

來源

2017-05-29 mehtak

嗯，我想這是在代碼中一個愚蠢的語法錯誤。

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

以前它是： template : './custom-modal.html'

來源

2017-05-30 11:54:01 mehtak

自定義組件不能在角碼中訪問

回答

相關問題