带值的 Angular 属性组件答案

【问题标题】：Angular attribute component with value带值的 Angular 属性组件
【发布时间】：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.

【问题讨论】：

标签： angular typescript components

【解决方案1】：

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

@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.

【讨论】：

【解决方案2】：

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

【讨论】：