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”以避免這種簡單的錯誤。