Question

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

@Component({
  selector: 'aricle-root',
  template: '<li>{{article}}</li>'
})

export class Article {
  @Input() article: object;

  constructor() {
    console.log(this.article); //undefined
  }
}

因此，当我将变量{{artical}}从我的父组件传递给此组件并且它接收并将其呈现为正常时，但是如果我想对该变量执行某些操作，例如在控制台上打印它以获取示例。它似乎总是未定义的

Answer 1

似乎您希望在Input绑定更改时获得推荐。您可以使用ngOnChanges挂钩来关注Input属性更改，并将代码放入其中。

//import { SimpleChanges, SimpleChanges } from '@angular/core';

ngOnChanges(changes: SimpleChanges){
   console.log(changes)
}

Answer 2

在构造函数中，您的变量尚未设置。您可以在设置时访问：

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

@Component({
  selector: 'aricle-root',
  template: '<li>{{article}}</li>'
})

export class Article implements OnChanges {
  @Input() article: object;

  constructor() {

  }
  ngOnChanges(model){
     console.log(article)
  }
}

使用父组件中的数据

2 个答案: