Question

我正在尝试通过指令元标记将数据从一个组件发送到另一个组件但是当我安慰它时它显示错误未定义。任何人都可以建议我帮忙。谢谢。

我的组件，

import { ModalComponent } from './modal/modal.component';
@Component({
  selector: 'my-app',
  template: `<modal [hero]="value"></modal>'
})
export class CommonComponent  { 
  value : anny ='1';

}

@Component({
  selector: 'modal',
  templateUrl : './modal/model.component.html'
})
export class CommonComponent  { 
  @Input() hero:any;
  consrtuctor(){
  console.log(this.hero) ///// shows o/p as undefined

}

Answer 1

看看lifecycle hooks。

在Angular中，构造函数用于依赖注入。当您想要处理@Input() @Output()和类似的装饰器时，您需要在组件生命周期中调用其中一个内置函数。

使用：

而不是constructor() {...}

ngOnInit() {
  console.log(this.hero); // not undefined
}

Answer 2

您面临的问题是，在调用构造函数时，Angular尚未设置@Input和@Output绑定。这就是你的英雄财产显示为未定义的原因。如果要在组件初始化期间使用@Input和/或@Output绑定，则必须等到Angular首先初始化这些绑定，然后再尝试使用它们。

Angular提供了一个生命周期钩子来完成同样的事情。基本上，如果在组件上定义一个名为ngOnInit的方法，在Angular完成组件初始化之后，它将调用该方法。此时，您的绑定将具有您期望的值。

所以，你的班级应该更像：

export class CommonComponent  { 
  @Input() hero:any;
  constructor(){ }

  ngOnInit() {
    console.log(this.hero) // will be defined at this point
  }
}

通常，你的构造函数中确实不应该有任何真正的初始化逻辑（因为在你的构造函数被调用时，你的绑定都没有到位）。对于绝大多数组件，构造函数仅用于通过将这些服务作为参数列入构造函数来请求服务依赖性 - 组件的初始化发生在ngOnInit中。

请参阅lifecycle hooks guide了解详情。

如何通过angular 2中的指令标记发送值

2 个答案: