Javascript 通过HTML初始化Angular 2中组件的正确方法

我有一个组件，它从外部获取一些参数，然后根据这些参数构建其其余属性：

import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';

/*  
    Info card for displaying information in the homepage or another places
*/

@Component({
  selector: 'info-card',
  templateUrl: 'infocard.html'
})

export class InfoCard {
  icon;
  @Input() card = {
    title: '',
    description: '',  
    image: null,
    type: 0
  }


  constructor(public navCtrl: NavController) {

      // TODO: Complete type list
    switch(this.card.type){
        case 0:  // Pubs/Entertainment
            this.icon = "beer"; break;
        case 1:  // Restaurants
            this.icon = "restaurant"; break;
        case 2:  // Friends
            this.icon = "person"; break;
        case 3:  // Groups of people (private chats)
            this.icon = "people"; break;
        case 4:  // Objective
            this.icon = "checkbox-outline"; break;
        default:
            this.icon = "alert"; break;
    }

    // Image path
    if(this.card.image){
        this.card.image = '../../assets/infocards/'+this.card.image;
    }

  }

}

在构造器中，您可以看到如何根据卡的类型设置其图标。此外，图像只有在与“null”不同时才会被渲染，但我只想从其名称之外传递，因此我将文件夹的实际路径放入构造函数中，并在末尾连接图像名称

我想没什么奇怪的。然后，我尝试在代码中使用此组件：

 <info-card *ngFor="let card of testCards" [card]="card">

 </info-card>

卡片显示“正确”。我的意思是，模板呈现正常，但图标和图像（取决于构造函数）都不能正常工作。类型0始终存在，因此我总是看到“啤酒”图标，并且图像被破坏（因为它不是指向正确的目录，而是指向一个名称）

这导致了以下问题：构造函数何时运行？我以为在构造函数初始化之前会添加一个@Input值，但我想我错了

我应该怎么做才能正确地构建从HTML传递数据的组件

我只想在属性“card”传递到组件后执行一些代码

您需要使用：

---

您可能没有使用正确的属性、类和样式bindings@FabioAntunes你能进一步解释一下吗？你必须使用[attr.icon]=“icon”和[src]=“card.image”@FabioAntunes我想你还不明白这个问题。。。不是你的错，也许我解释得不好。信息显示得非常完美，真的！问题是，在我传递“card”参数之后，我需要一些代码来工作。该代码对未显示的数据进行了一些更改，因为我正在将其放入构造函数中，并且它在传递参数之前运行。ahhhh好的，您希望

ngOnChanges

import { Component, Input, OnChanges } from '@angular/core';
import { NavController } from 'ionic-angular';

/*  
    Info card for displaying information in the homepage or another places
*/

@Component({
  selector: 'info-card',
  templateUrl: 'infocard.html'
})

export class InfoCard implements OnChanges {
  icon;
  @Input() card = {
    title: '',
    description: '',  
    image: null,
    type: 0
  }


  constructor(public navCtrl: NavController) {

  }

  ngOnChanges(changes) {
    //changes will have your old card value and the new one
    switch(this.card.type){
        case 0:  // Pubs/Entertainment
            this.icon = "beer"; break;
        case 1:  // Restaurants
            this.icon = "restaurant"; break;
        case 2:  // Friends
            this.icon = "person"; break;
        case 3:  // Groups of people (private chats)
            this.icon = "people"; break;
        case 4:  // Objective
            this.icon = "checkbox-outline"; break;
        default:
            this.icon = "alert"; break;
    }

    // Image path
    if(this.card.image){
        this.card.image = '../../assets/infocards/'+this.card.image;
    }
  }

}