gpt4 book ai didi

带值的 Angular 属性组件

转载 作者:行者123 更新时间:2023-12-02 10:05:52 26 4
gpt4 key购买 nike

使用 Angular 6.0.7 ,我正在创建一个属性组件并向其中注入(inject)一个值。为此,我遵循答案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 )注入(inject)到组件中,但我不想进行其他绑定(bind),例如 [form]="loginForm" 。根据帖子here这应该是可能的,但我无法让它发挥作用。自更高的 Angular 版本以来,这是否发生了变化,或者我在这里做错了什么?

<小时/>

我已经尝试过

我尝试将输入绑定(bind)到 @Input通过显式绑定(bind)的变量,@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 指令,并且您正在注入(inject)一些东西,并引用 @Input("validate-on-submit") ,因为属性名称中不能包含破折号。

另请注意,我已更改 @Component装饰器@Directive ,因为它不会执行任何 DOM 操作,所以不需要 View 。 More info here .

最佳答案

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

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

关于带值的 Angular 属性组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51232186/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com