Angular 7 @Input 属性绑定不起作用

Question

我编写了一个简单的 angular 应用程序，使用 @input 在组件之间进行通信，但没有传递值。

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() {
  }  
}

Answer 1

如我所见，您需要进行以下更改，

（i）您应将字符串用引号引起来，如下所示

更改

从

<app-task [prioirty]="High"></app-task>

至

<app-task [prioirty]="'High'"></app-task>

（ii）在ngOnInit内而不是在构造函数内添加console.log，因为您需要等待组件加载完毕，

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

Answer 2

请注意， 您错误地使用了3个不同的变量 ！ 您在TaskComponent变量是priortiy与您要打印priority ，并通过prioirty在HTML中。

使用输入属性绑定时， 如果它不是类property ，则只需要用引号将值传递 。 因此， 最佳做法的 HTML代码段将是-

<app-task [priority]="'High'"></app-task>

并且以下内容也有效，其中[]现在已删除，并且它将像任何html属性一样将值视为字符串-

<app-task priority="High"></app-task>

在父母与孩子的沟通中， 建议使用适当的组件生命周期挂钩 。 因此，为了每次都获取最新值，您需要使用以下方法实现OnChanges接口-

ngOnChanges() {
    console.log(this.priority);
}

Answer 3

你应该用

<app-task prioirty="High"></app-task>

使用时

<app-task [prioirty]="High"></app-task> 

它表示High是一个变量，但不带括号则表示high是一个字符串。

Answer 4

您可以在ngOnChanges() lifeCycle钩子之后获取输入属性。 如果要检查是否将其作为子组件，请在ngOnInit()添加控制台ngOnInit()在第一个ngOnChanges()之后运行一次

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

或者，将其记录在ngOnChanges（）中。

Answer 5

您的代码无法正常工作的原因是，通过使用值为High的绑定语法括号[] ，它将在组件中寻找名称为High的属性。

要解决此问题，您可以使用以下代码：

<app-task priority="High"></app-task>

要么

<app-task [priority]="'High'"></app-task>

这两个选项均会将属性值视为字符串文字。

请检查下面提供的链接中的代码：

https://stackblitz.com/edit/angular-component-task-input

Answer 6

我认为您的问题是“优先级”一词中的一个简单错字：

1. <app-task [prioirty]="高">
2. @Input() 优先级：字符串；

第一次是“优先”，第二次是“优先”。 注意“i”的移动......也许只是将它重命名为“prio”以避免这种简单的错误。