带值的 Angular 属性组件

Posted 2023-02-22

【中文标题】带值的 Angular 属性组件

【英文标题】：Angular attribute component with value

【发布时间】：2018-12-16 08:22:36

【问题描述】：

使用 Angular 6.0.7，我正在创建一个属性组件并向其中注入一个值。为此，我正在关注here的答案。

我想知道是否有一种方法，就像在 AngularJS 中一样，可以直接将值输入到组件中，而无需定义单独的[form]=""。 例如：<div my-component="form">。

---

html

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

---

属性组件

@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);    
  

console.warn(this.form) 的结果是“undefined”。

---

我要做什么

我正在尝试将我的表单（通过变量#loginForm）注入到组件中，但我不想进行其他绑定，例如[form]="loginForm"。根据here 的帖子，这应该是可能的，但我无法让它工作。自从更高的 Angular 版本以来，这种情况发生了变化，还是我在这里做错了什么？

---

我试过了

我已尝试通过显式绑定 @Input('form') private form: NgForm 将输入绑定到 @Input 变量，但这个结果导致了“undefined”。

我还尝试恢复或更改引号 validate-on-submit="loginForm" 或 validate-on-submit="'loginForm'"，但在某些尝试中，这会导致 Angular 根本无法重新调整组件选择器。

---

解决方案

在@user184994 的回答下，我设法更改了我的代码并使其正常工作。这导致了以下代码：

html

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

组件

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

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

请注意，选择器被 [] 包围，表示它是一个 Angular 指令，并且您正在注入一些东西并引用 @Input("validate-on-submit")，因为属性的名称中不能有破折号。

还请注意，我已将 @Component 装饰器更改为 @Directive，因为它不会进行任何 DOM 操作，因此没有必要拥有视图。 More info here.

【参考方案1】：

You Solution here

HTML：

app.component.html

<form (ngSubmit)="login()"
      #loginForm="ngForm"
      validateonsubmit ="loginForm.valid" >
</form>

hello.component.html：

form is valid : validateonsubmit

TS：

import  Component, Input  from '@angular/core';
import NgForm  from '@angular/forms'

@Component(
  selector: '[validateonsubmit]',
  templateUrl:'./hello.component.html',
  styles: [`h1  font-family: Lato; `]
)
export class HelloComponent  
  @Input() validateonsubmit : NgForm;

  public ngOnInit(): void 
    console.warn(this.validateonsubmit);    
  

  login(bool)
    console.log(bool);
  

【参考方案2】：

您需要创建一个与属性选择器同名的输入。例如，

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

  @Input() hello: string;

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

我可以像<div hello="Test" ></div>这样使用，Test的值会被传入。

工作示例here.