typescript - Angular attributtkomponent med verdi

Ved å bruke Angular 6.0.7, oppretter jeg en attributtkomponent og injiserer en verdi i den. For dette følger jeg svaret her.

Jeg vil vite om det finnes en måte, akkurat som i AngularJS, å skrive inn en verdi direkte i komponenten, uten behov for å definere en separat [form]="". For eksempel: <div my-component="form">.

HTML

<form (ngSubmit)="login(loginForm.form.valid)" 
      #loginForm="ngForm"
      validate-on-submit='"loginForm"'>
</form>

Attributtkomponenten

@Component({
  selector: '[validate-on-submit="form"]',
  template: `<ng-content></ng-content>`
})
export class ValidateOnSubmitComponent implements OnInit {

  @Input() private form: NgForm;

  public ngOnInit(): void {
    console.warn(this.form);    
  }
}

Kommandoen console.warn(this.form) resulterer i 'undefined'.

Hva jeg prøver å gjøre

Jeg prøver å injisere skjemaet mitt (via variabelen #loginForm) inn i komponenten, men jeg ønsker ikke å lage en annen binding, som [form]="loginForm". Ifølge innlegget her skal dette være mulig, men jeg får det ikke til å fungere. Har dette endret seg siden en høyere Angular-versjon, eller gjør jeg noe feil her?

Jeg har prøvd

Jeg har forsøkt å binde inputen til @Input-variabelen via eksplisitt binding, @Input('form') private form: NgForm, men dette resulterte også i 'undefined'.

Jeg prøvde også å tilbakestille eller endre anførselstegnene validate-on-submit="loginForm" eller validate-on-submit="'loginForm'", men i noen av forsøkene resulterte dette i at Angular ikke gjenkjente komponentvelgeren i det hele tatt.

Løsning

Med svaret fra @user184994 har jeg klart å endre koden min og få den til å fungere. Dette resulterte i følgende kode:

html

<form (ngSubmit)="login(loginForm.form.valid)" 
      #loginForm="ngForm"
      [validate-on-submit]="loginForm">
</form>

komponent

@Directive({
  selector: "[validate-on-submit]"
})
export class ValidateOnSubmitComponent {

  @Input("validate-on-submit") private form: NgForm;
}

Merk at velgeren er omgitt av [] for å indikere at det er en Angular-direktiv, og du injiserer noe, og der referanse til @Input("validate-on-submit"), siden en egenskap ikke kan ha bindestreker i navnet sitt.

Merk også at jeg har endret @Component dekoratøren til @Directive, siden den ikke vil gjøre noen DOM-manipulasjon, er det ikke nødvendig å ha en visning. Mer informasjon her.

Svar #1

Du må opprette et inputfelt med samme navn som attributtvelgeren. For eksempel,

@Component({
  selector: '[hello]',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  @Input() hello: string;

  ngOnInit() {
    console.log(this.hello);
  }
}

Jeg kan bruke dette som <div hello="Test" ></div>, og verdien Test vil bli sendt inn.

Arbeidende eksempel her.

Relaterte artikler