[英]Angular 7 @Input property binding is not working
I have written a simple angular application with @input to communicate between components but the value is not being passed.我编写了一个简单的 angular 应用程序,使用 @input 在组件之间进行通信,但没有传递值。
app.componenent.html app.component.html
<app-task [prioirty]="High"></app-task>
task.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { TaskService } from 'src/app/task/services/task.service';
import {AppComponent} from 'src/app/app.component'
@Component({
selector: 'app-task',
templateUrl: './task.component.html',
styleUrls: ['./task.component.css'],
})
export class TaskComponent implements OnInit {
@Input() priortiy: string;
constructor(private taskService: TaskService) {
console.log(this.priority);
}
ngOnInit() {
}
}
As i see you need to make the following changes, 如我所见,您需要进行以下更改,
(i) You should enclose the string within quotes as follows (i)您应将字符串用引号引起来,如下所示
change 更改
From 从
<app-task [prioirty]="High"></app-task>
To 至
<app-task [prioirty]="'High'"></app-task>
(ii) Add your console.log inside the ngOnInit not within your constructor as you need to wait until the component gets loaded, (ii)在ngOnInit内而不是在构造函数内添加console.log,因为您需要等待组件加载完毕,
ngOnInit() {
console.log(this.priority);
}
Please note that you are using 3 different variables by mistake !
请注意, 您错误地使用了3个不同的变量 ! Your variable in TaskComponent is
priortiy
& you are printingpriority
and passingprioirty
in HTML.您在TaskComponent变量是
priortiy
与您要打印priority
,并通过prioirty
在HTML中。
When you use input property binding, you simply need to pass your value with quotes if it isn't a class property . 使用输入属性绑定时, 如果它不是类property ,则只需要用引号将值传递 。 So, your HTML snippet with a best practice will be -
因此, 最佳做法的 HTML代码段将是-
<app-task [priority]="'High'"></app-task>
And the following is also valid, where []
is now removed & it will consider the value as a string as any html attribute does - 并且以下内容也有效,其中
[]
现在已删除,并且它将像任何html属性一样将值视为字符串-
<app-task priority="High"></app-task>
In parent to child communication, using appropriate component lifecycle hooks is recommended .
在父母与孩子的沟通中, 建议使用适当的组件生命周期挂钩 。 So, in order to get the latest value every time, you'll need to implement
OnChanges
interface with the following method -因此,为了每次都获取最新值,您需要使用以下方法实现
OnChanges
接口-
ngOnChanges() {
console.log(this.priority);
}
You should use 你应该用
<app-task prioirty="High"></app-task>
when you are using 使用时
<app-task [prioirty]="High"></app-task>
it means High is a variable but without bracket it means high is a string. 它表示High是一个变量,但不带括号则表示high是一个字符串。
You get the input property after ngOnChanges()
lifeCycle hook. 您可以在
ngOnChanges()
lifeCycle钩子之后获取输入属性。 If you want to check whether you are getting it your child component, add the console in ngOnInit()
- ngOnInit() runs once after first ngOnChanges()
如果要检查是否将其作为子组件,请在
ngOnInit()
添加控制台ngOnInit()
在第一个ngOnChanges()
之后运行一次
ngOnInit() {
console.log(this.priority);
}
Alternatively, log it in ngOnChanges(). 或者,将其记录在ngOnChanges()中。
The reason why your code does not work is that, by using the binding syntax bracket []
with value as High
, It is looking for a property in your component with name High
. 您的代码无法正常工作的原因是,通过使用值为
High
的绑定语法括号[]
,它将在组件中寻找名称为High
的属性。
To fix this, you can either use the following code: 要解决此问题,您可以使用以下代码:
<app-task priority="High"></app-task>
or 要么
<app-task [priority]="'High'"></app-task>
both of these options will treat the property value as string literal. 这两个选项均会将属性值视为字符串文字。
Please check the code in the link provided below: 请检查下面提供的链接中的代码:
https://stackblitz.com/edit/angular-component-task-input https://stackblitz.com/edit/angular-component-task-input
I think your problem is a simple typo in the word "priority":我认为您的问题是“优先级”一词中的一个简单错字:
One time it's "prioirty", the second time it's "priortiy".第一次是“优先”,第二次是“优先”。 Notice the "i" moving around... Maybe just rename it to "prio" to avoid this easy kind of mistake.
注意“i”的移动......也许只是将它重命名为“prio”以避免这种简单的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.