Angular 2 구성 요소 @Input이 작동하지 않습니다.

Angular 2 구성 요소 @Input이 작동하지 않습니다.

---

내 구성 요소에 속성 값을 전달하려고 노력 중입니다. 내가 읽은 것에서 모든 것이 올바르게 보입니다. 그러나 여전히 작동하지 않습니다. 내 테스트 값은 화면과 콘솔에 null로 출력됩니다. :(

이것은 내 테스트 구성 요소입니다.

import {Component, Input} from 'angular2/angular2';

@Component({
    selector: 'TestCmp',
    template: `Test Value : {{test}}`
})

export class TestCmp {

    @Input() test: string;

    constructor()
    {
        console.log('This if the value for user-id: ' + this.test);
    }
}

이것이 부모 페이지에서 구성 요소를 호출하는 방법입니다.

<TestCmp [test]='Blue32'></TestCmp>

페이지 렌더링시 테스트 값이 비어 있습니다. '테스트 값 :'만 표시됩니다.

'테스트 값 : Blue32'대신.

---

내가 주목할 수있는 네 가지 사항이 있습니다.

• 작동하지 않는 루트 구성 요소에 입력을 전달하고 있습니다.
• @alexpods가 언급했듯이 CamelCase를 사용하고 있습니다. 당신은해야하지.
• 을 통해 문자열 대신 표현식을 전달하고 [test]있습니다. 즉, angular2는 Blue32원시 문자열을 전달하는 대신 이름이 지정된 변수를 찾습니다.
• 생성자를 사용하고 있습니다. 작동하지 않습니다. 뷰가 초기화 된 후 데이터 바인딩 된 속성이 초기화되어야합니다 ( OnInit 문서 참조 ).

따라서 몇 가지 수정으로 작동합니다.

베타 1로 업데이트 된 예

import {Component, Input} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector : 'childcmp',
  template: `Test Value : {{test}}`
})
class ChildCmp {
    @Input() test: string;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

@Component({
    selector: 'testcmp',
    template : `<childcmp [test]="'Blue32'"></childcmp>`
    directives : [ChildCmp]
})
export class TestCmp {}

bootstrap(TestCmp);

이 plnkr 를 예로 참조하십시오 .

최신 정보

사람들이 여전히이 답변에 도달하는 것을 알기 때문에 plnkr을 베타 1로 업데이트했고 설명에서 한 가지 점을 수정했습니다. ngAfterViewInit에서 입력에 액세스 할 수 있지만 ngOnInit 내에서 수명주기의 초기에 액세스 할 수 있습니다.

---

다음과 같이 큰 따옴표로 문자열을 묶는 것만 큼 쉽습니다.

<TestCmp [test]="'Blue32'"></TestCmp>

---

대괄호 []를 사용하는 경우 Angular는 속성 바인딩을 사용 하고 따옴표 안에 있는 식 을받을 것으로 예상하고 구성 요소 클래스 또는 템플릿 내의 변수에서 'Blue32'라는 속성을 찾습니다.

문자열을 자식 구성 요소에 값으로 전달하려면 다음과 같이 전달할 수 있습니다.

<child-component childProperty='passing string'></child-component>

또는

<child-component [childProperty]="'note double quotes'"></child-component>

그런 다음 다음과 같이 child.component.ts로 가져갑니다.

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

@Component({})
export class ChildComponent {

    @Input()
    childProperty: string;

}

---

이 각도 클래스는 정적 속성에 대한 트릭을 만들 수 있습니다. ElementRef https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

import {ElementRef} from 'angular2/core'

constructor(elementRef: ElementRef) {
    elementRef.nativeElement.getAttribute('api')
}

---

여기서 문제는 페이지의 수명주기와 관련이있을 수 있다고 생각합니다. 생성자 내부에서 this.test의 값이 null이기 때문입니다. 그러나 값을 콘솔에 푸시하는 함수에 연결된 템플릿에 버튼을 추가하면 (생성자에서 수행하는 것과 동일) this.test는 실제로 값을 갖게됩니다.

---

망치 처럼 보이지만 다음과 같이 객체에 입력을 감쌀 수 있습니다.

<TestCmp [test]='{color: 'Blue32'}'></TestCmp>

수업 변경

class ChildCmp {
    @Input() test: any;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

---

당신은 하위 구성 요소의 상단에 이와 같은 입력을 가져와야

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

---

나를 위해 일한 것을 공유 :

Angular 4 앱에 입력 추가

두 가지 구성 요소가 있다고 가정합니다.

• parent-component
• child-component

우리는 일부 값을 전달하고 싶었 parent-component을 child-component즉 @Input에서 parent-component.html에 child-component.ts. 다음은 구현을 설명하는 예입니다.

parent-component.html 다음과 같이 보입니다.

<child-component [someInputValue]="someInputValue"></child-component>

parent-component.ts 다음과 같이 보입니다.

  
  class ParentComponent {

  someInputValue = 'Some Input Value';

}

child-component.html 다음과 같이 보입니다.

<p>Some Input Value {{someInputValue}}</p>

child-component.ts 다음과 같이 보입니다.

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

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html'
})
export class ChildComponent implements OnInit {

  @Input() someInputValue: String = "Some default value";

  @Input()
  set setSomeInputValue(val) {
    this.someInputValue += " modified";
  }

  constructor() {
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined
  }

  ngOnInit() {
    console.log('someInputValue  in ngOnInit ************** ', this.someInputValue); //someInputValue  in ngOnInit ************** Some Input Value
  }
}

Notice that the value of the @Input value is available inside ngOnInit() and not inside constructor().

Objects reference behaviour in Angular 2 / 4

In Javascript, objects are stored as references.

This exact behaviour can be re-produced with the help of Angular 2 / 4. Below is an example which explains the implementation:

parent-component.ts looks like this:

  
  class ParentComponent {

  someInputValue = {input: 'Some Input Value'};

}

parent-component.html looks like this:

  
{{someInputValue.input}}

child-component.html looks like this:

Some Input Value {{someInputValue}}

change input

child-component.ts looks like this:

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

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html'
})
export class ChildComponent implements OnInit {

  @Input() someInputValue = {input:"Some default value"};

  @Input()
  set setSomeInputValue(val) {
    this.someInputValue.input += " set from setter";
  }

  constructor() {
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined
  }

  ngOnInit() {
    console.log('someInputValue  in ngOnInit ************** ', this.someInputValue); //someInputValue  in ngOnInit ************** Some Input Value
  }

  changeInput(){
    this.someInputValue.input += " changed";
  }
}

The function changeInput() will change the value of someInputValue inside both ChildComponent & ParentComponent because of their reference. Since, someInputValue is referenced from ParentComponent's someInputValue object - the change in ChildComponent's someInputValue object changes the value of ParentComponent's someInputValue object. THIS IS NOT CORRECT. The references shall never be changed.

---

When you are making use of @Input for the angular interaction.It is always preferred approach to pass the data from parent to child in JSON object apparently it doesn't not restrict by @Angular Team to use local variable or static variable.

In context to access the value on child component make use ngOnInit(){} angular life hook cycle regardless of constructor.

That will help you out. Cheers.

참고URL : https://stackoverflow.com/questions/33326376/angular-2-component-input-not-working