Angular：动态更改共享组件中的按钮文本

Question

我正在尝试在登录页面中使用共享组件并注册页面。

不幸的是，我可以动态更改按钮中的文本。

共享组件

<button ion-button block (click)="someMethod()">{{ submitLabel }}</button>

@Component({
  selector: 'registration-form',
  templateUrl: 'registration-form.html'
})
export class RegistrationFormComponent {

  public submitLabel: string = '';

  constructor() {}

  public changeLabel(text: string) {
    this.submitLabel = text;
  }
}

的login.html

<ion-content padding>
  <ion-list>
    <ion-row>
      <ion-col>
        <h2>Hello World</h2>
      </ion-col>
    </ion-row>
    <registration-form></registration-form>
  </ion-list>
</ion-content>

login.ts

import { RegistrationFormComponent } from "@my-app/components/registration-form/registration-form";

export class LoginPage {

  @ViewChild('RegistrationFormComponent') registrationSubmitBtn: RegistrationFormComponent;

  ionViewDidEnter() {
    // TypeError: Cannot read property 'changeLabel' of undefined
    this.registrationSubmitBtn.changeLabel('Log In'); 
  }
}

我在这里缺少什么？有什么想法吗？