带值的角度属性组件

Question

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

我想知道有没有一种方法，就像在AngularJS中一样，直接在组件中输入一个值，而不需要定义单独的< code>[form]=""。例如:<代码>

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

控制台.warn（this.form）导致“未定义”。

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

我试过

我试图通过显式绑定将输入绑定到＜code＞input＜/code＞变量，＜code＞input（‘form’）private form:NgForm＜/code＞，但这个alo导致了‘＜code＞未定义＜/code＞’。

我还尝试恢复或更改引号 validate-on-submit=“loginForm” 或 validate-on-submit=“'loginForm'”，但在一些尝试中，这会导致 Angular 根本没有重新协调组件选择器。

解决方案

有了@user184994的答案，我已经设法更改了我的代码并使其正常工作。这会导致以下代码：

超文本标记语言

<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（“提交时验证”），因为属性的名称中不能有破折号。

Answer 1

你在这里找到解决方案了吗

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

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

这里是工作示例。