Question

嗨，我正在尝试从由modal组成的父组件中调用子组件方法，但是子组件的对象在调用该方法时显示未定义。我知道在调用该方法时范围会迷路，但是如何使它起作用是我关心的问题。请帮忙。下面是我的代码：

parent.html

<ng-template #templateProcsrref let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">{{processorForText}}</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body modal-container">
        <procsrTmplt-dynamic [modalpageHeader]="processorForText" [modalForProcessor]="processorForValue"></procsrTmplt-dynamic>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-success" (click)="saveProcessorDetails();">Save</button>
        <button type="button" class="btn btn-outline-dark" (click)="d('Cross click')">Close</button>
    </div>
</ng-template>

parent.component

   @ViewChild(ProcessorDtlTmpltComponent) prcsTmplt: ProcessorDtlTmpltComponent;

    saveProcessorDetails() {
            this.prcsTmplt.saveProcessorDetails();
        }

child.component

@Component({
    selector: 'procsrTmplt-dynamic',
    templateUrl: './prcsrdtltmplt.component.html'
})

export class ProcessorDtlTmpltComponent implements OnInit {
    processorDtlTempl: FormGroup;
    @Input() modalpageHeader: string;
    @Input() modalForProcessor: string;
    processorTmplt: any;

    constructor(
        private router: Router,
        private route: ActivatedRoute
       ) { }

    ngOnInit() {

    }

    saveProcessorDetails() {

        var a = this.processorDtlTempl;
    }

}

错误： VM4168：37错误TypeError：无法读取未定义的属性'saveProcessorDetails'

请帮助。

Angular 2从父级模态中调用子级组件方法

0 个答案: