带值的 Angular 属性组件

Posted

技术标签:

【中文标题】带值的 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);
  

我可以像&lt;div hello="Test" &gt;&lt;/div&gt;这样使用,Test的值会被传入。

工作示例here.

【讨论】:

以上是关于带值的 Angular 属性组件的主要内容,如果未能解决你的问题,请参考以下文章

使用组件类中的变量来修改伪元素上的属性值的 Angular/Mobile 友好方式是啥?

angular父子组件之间的传值

Angular 1.5 组件属性存在

angular 中组件的生命周期函数

Angular2 的属性绑定

Angular - 如何为可选输入属性设置默认值