@Input 데코레이터와 interface 초기화 관련 질문입니다.

Question

Angular Essential을 보면서 공부하고 있습니다. 부모 컴포넌트와 자식 컴포넌트 사이에 데이터를 교환하는 법을 배우는데, 책의 타입 스크립트가 오래된 버전이라 그런지 작동안되는 코드가 있습니다. 부모 컴포넌트 코드import { Component, ViewChildren, QueryList } from '@angular/core'; import {ChildComponent } from './child/child.component' export interface Checkbox { id: number; label: string; checked: boolean; } @Component({ selector: 'app-root', template: `

Parent

//Using 3 child component(tags) in this case

`, styles: [] }) export class AppComponent { checkboxs: Checkbox[] = [ {id: 1, label: 'HTML', checked: true}, {id: 2, label: 'CSS', checked: false}, {id: 3, label: 'Javascript', checked: false} ]; active = false; @ViewChildren(ChildComponent) myChildren: QueryList = new QueryList(); toggle(){ this.active = !this.active; this.myChildren.forEach(child => child.checkbox.checked = this.active); } }자식 컴포넌트 코드 import { Component, Input} from '@angular/core'; import { Checkbox } from '../app.component' @Component({ selector: 'child', template: ` {{ checkbox.label }} `, styles: [ ] }) export class ChildComponent { @Input() checkbox: Checkbox; } 문제가 되는 부분은 @Input() checkbox: Checkbox; 입니다. 이전 앵귤러 버전에서는 이 코드가 잘 돌아갔으나 최신 버전에서는 이것이 되지않는 것 같습니다. checkbox를 초기화하면 돌아가는데 문제는 Checkbox가 인터페이스라서 초기화가 불가능합니다. 그냥 리터럴 객체 생성해서 넣거나 생성자 사용해도 작동을 제대로 안합니다(? safe-navigation-operator도 안되더라구요 ). 에러 메시지는 다음과 같습니다. Property 'checkbox' has no initializer and is not definitely assigned in the constructor. 어떻게 해야 이 문제를 고칠 수 있을까요?

@Input 데코레이터와 interface 초기화 관련 질문입니다.

0개의 답변

#angular5 목록