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

Question

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

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

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