Question

我使用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将输入绑定到@Input('form') private form: NgForm变量，但这也导致了'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。

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

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

具有值的角度属性分量

2 个答案: