Question

我用@input编写了一个简单的角度应用程序，以在组件之间进行通信，但是该值未传递。

app.componenent.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）将console.log添加到ngOnInit中，而不是在构造函数中，因为您需要等待组件加载完毕，

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

Answer 2

请注意，您错误地使用了3个不同的变量！您在TaskComponent中的变量为priortiy，并且您正在打印priority并在HTML中传递prioirty。

使用输入属性绑定时，只需将其不是类属性的值带引号即可。因此，具有 最佳做法 的HTML代码段将为-

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

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

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

在父母与孩子之间的交流中，建议使用适当的 component lifecycle hooks 。因此，为了每次都获得最新的价值，您需要使用以下方法实现 OnChanges 接口-

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

Answer 3

您应该使用

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

使用时

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

这意味着高是变量但是如果没有括号，则意味着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

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

5 个答案: