从父代到子代的角度传递数据未定义

时间:2018-07-31 09:21:59

标签: angular typescript

我正在尝试使用组件交互将数据从父级传递到子级

在父组件中:

<app-news [leonardType]="countTitle"></app-news>

子组件

export class NewsComponent implements OnInit, AfterViewChecked {

  @Input() leonardType: string;
  title;
  constructor(
    public newsService: NewsService
  ) {}
  ngAfterViewChecked() {
    console.log(this.leonardType); ==> undefined
    console.log(this.newsService.leonardCategory[this.leonardType]); ==> undefined
  }

  ngOnInit() {
    this.title = this.newsService.leonardCategory[this.leonardType];
    console.log(this.leonardType); ==> undefined
    console.log(this.newsService.leonardCategory[this.leonardType]); ==> undefined
}

在子组件服务中,我有一个对象:

leonardCategory = {
  countTitle: "TITLE 1",
  indTitle: "TITLE 2"
};

我认为该视图尚未呈现,但是在ngAfterViewChecked中,我得到了leonardType的未定义输出

1 个答案:

答案 0 :(得分:3)

如果您想传递countTitle文本,只需将其包装到''中即可。如果没有'',则它被视为undefined组件中的属性,因此为什么要在子组件中获得undefined

<app-news [leonardType]="'countTitle'"></app-news>

或者没有[]

<app-news leonardType="countTitle"></app-news>