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

【问题标题】：Proper way of initializing components in Angular 2 via HTML通过 HTML 在 Angular 2 中初始化组件的正确方法
【发布时间】：2016-10-19 08:48:34
【问题描述】：

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

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”传递给组件后执行一些代码！

【问题讨论】：

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

标签： javascript angular ionic-framework ionic2

【解决方案1】：

您需要使用OnChanges：

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;
    }
  }

}

【讨论】：