Question

我创建了一个处理用户注册和登录的共享组件。问题是(click)=this[functionName]()次呼叫与两个不同的网页发生冲突。

例如，当我点击signup中的signup page按钮时，会不时调用login method 优先。我想动态更改函数名称就像下面的代码一样是错误的方法。

如何解决此问题？有没有更好的方法来更改共享组件中每个页面的按钮标签和方法？

RegistrationFormComponent

export class RegistrationFormComponent {

  submitLabel: string;
  functionName: string;

  public handleDynamicSubmitFunc(funcName: string) { this.functionName = funcName; }

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

  async login() { ... }
  async signup() { ... }
}

<button ion-button block [disabled]="!userEmail.valid || !userPassword.valid" (click)="this[functionName]()">{{ submitLabel }}</button>

注册页面

import { RegistrationFormComponent } from "../components/registration-form/registration-form";

export class SignupPage {

  @ViewChild(RegistrationFormComponent) registrationForm: RegistrationFormComponent;

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    this.registrationForm.changeSumitButtonLabelTo('Sign Up');
    this.registrationForm.handleDynamicSubmitFunc('signup');
  }
}

登录页面

import { RegistrationFormComponent } from "../components/registration-form/registration-form";

export class LoginPage {

  @ViewChild(RegistrationFormComponent) registrationForm: RegistrationFormComponent;

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    this.registrationForm.changeSumitButtonLabelTo('Log In');
    this.registrationForm.handleDynamicSubmitFunc('login');
  }
}

Answer 1

您可以使用Output装饰器收听您的共享组件。

在共享组件html中，

<button ion-button block [disabled]="!userEmail.valid || !userPassword.valid" (click)="submit()">{{ submitLabel }}</button>

在相应的ts文件中，

export class RegistrationFormComponent {
    @Output() onSubmit = new EventEmitter<any>();

    submit(){
       this.onSubmit.emit({email:this.email,password:this.password});//pass the values as an object
    }
}

在您的父组件中，例如注册，

HTML：

<registration-form (onSubmit)="signup($event)"></registration-form><!-- receive event -->

和ts：

export class SignupPage {

   signup($event){
       //access as $event.email and $email.password
       //...
   }
}

从共享组件动态切换功能

1 个答案: