Angular 具有值的角度属性组件

使用Angular

6.0.7

，我正在创建一个属性组件并向其中注入一个值。为此，我遵循答案

我想知道是否有一种方法，就像在AngularJS中一样，可以直接将值输入到组件中，而不需要定义单独的

[form]=''

。 例如：

---

html文件

<form (ngSubmit)="login(loginForm.form.valid)" 
      #loginForm="ngForm"
      validate-on-submit='"loginForm"'>
</form>

组成部分

请注意，选择器被

[]

包围，用于指示它是一个角度指令，并且您正在注入一些东西，并且引用

@Input（“提交时验证”）

，因为属性的名称中不能有破折号

---

还请注意，我已将

@组件

装饰器更改为

@指令

，因为它不会执行任何DOM操作，因此不需要有视图

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

@Component({
  selector: '[hello]',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  @Input() hello: string;

  ngOnInit() {
    console.log(this.hello);
  }
}

@组件({
选择器：“[你好]”，
模板：`Hello{{name}}！`，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent{
@Input（）hello:string；
恩戈尼尼特（）{
log（this.hello）；
}
}

我可以像

那样使用它，值

Test

将被传入

工作示例

HTML:

app.component.html

<form (ngSubmit)="login()"
      #loginForm="ngForm"
      validateonsubmit ="{{loginForm.valid}}" >
</form>

TS:

@Directive({
  selector: "[validate-on-submit]"
})
export class ValidateOnSubmitComponent {

  @Input("validate-on-submit") private form: NgForm;
}

@Component({
  selector: '[hello]',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  @Input() hello: string;

  ngOnInit() {
    console.log(this.hello);
  }
}

<form (ngSubmit)="login()"
      #loginForm="ngForm"
      validateonsubmit ="{{loginForm.valid}}" >
</form>

form is valid : {{validateonsubmit}}

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