如何将模板引用变量传递给父控制器（不是同一控制器）

Question

child.html

<div class="form-group">
     <label>Recipient's email address</label>
     <input name="email" type="email" #custEmail="ngModel" required validate-email/>
</div>

Child.ts

import {Component, Input, Output, EventEmitter, ViewChild} from '

@angular/core';

@Component({
    selector: 'child',
    templateUrl: './child.html',
})
export class InvoicePreviewSendComponent {

    @ViewChild('custEmail') email;

    log() {
        console.log(this.email.value);
        console.log(this.email);
    }
}

Parent.ts

import { Component, EventEmitter, Inject, Output, ViewChild, SecurityContext} from '@angular/core';

@Component({
    selector: 'parent',
    templateUrl: './parent.html'
})
export class InvoiceDetailsComponent {
    @ViewChild('preview') preview;

    private save() {
        this.preview.log(); //works
        console.log(this.preview.email); //undefined
    }
}

patent.html

..
..
    <child #preview></child>
    <button (click)=save()>
..
..

因此，如代码中所述，this.preview.log()有效，但是this.preview.email是undefined。我虽然使用@ViewChild组件，但应该将电子邮件作为#preview的属性。如何访问到父元素的电子邮件？