具有值的角度属性分量

Question

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

我想知道是否有一种方法，就像在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"。根据此处的帖子，这应该是可能的，但我无法使其正常工作。自从更高的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操作，所以不必具有视图。更多信息在这里。

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将被传递。

这里的工作示例。