DOM에 속성을 바인딩하지 않는 Angular2 구성 요소

Question

나는 학습을 위해 Angular 2로 연주하고 있습니다.

나는 임의의 그림, 텍스트 및 좋아하는 것을 보여주고 자 노력하는 Tweet 구성 요소를 작성했습니다. 이런 식으로 뭔가 :

tweet.component.html

<div class="media"> 
    <div class="media-left"> 
    <a href="#"> 
     <img class="media-object" src="http://lorempixel.com/100/100/people?1" alt="">  
    </a> 
    </div> 
    <div class="media-body"> 
    <span>{{nameOfThePerson}}</span> 
    <span> {{tweeterHandler}}</span> 
    <span>{{tweetText}}</span> 
    <heart [numberOfLikes]=5></heart> 
    </div> 
</div> 

그리고이 같은 app.component.html에서 그것을 사용하고 있습니다 : 브라우저에

 <div> 
     <tweet 
      [nameOfThePerson]="randomName" 
      [tweeterHandler]="handler1" 
      [tweetText]="firstText"> 
     </tweet> 
    </div> 

난 그냥 임의의 이미지와 숫자를 얻고있다 좋아하는 사람의 텍스트는 아니지만 사람의 이름과 트위터 처리기가 아닙니다.

여기에 무엇이 누락되어 있는지 말해주십시오.

전체 코드는 여기에 있습니다 :

https://github.com/tsingh38/Angular2

감사합니다. 브라우저가이 방법으로 아무것도 바인드 표시되지 않는 이유 당신이 당신의 app.component.ts에서 randomName 등을 정의 have'nt

Answer 1

내 생각 엔 당신이 randomName, handler1를 전달하고 싶은 것입니다 thts 파일 firstText 문자열로 tweet의 속성 값을하지만, 당신이 지금하고있는 일은 그 이름을 가진 변수를 값으로 전달하는 것입니다. 문제는 존재하지 않는다는 것입니다.

<tweet 
    nameOfThePerson="randomName" 
    tweeterHandler="handler1" 
    tweetText="firstText"> 
</tweet> 

또는 :

<tweet 
    [nameOfThePerson]="'randomName'" 
    [tweeterHandler]="'handler1'" 
    [tweetText]="'firstText'"> 
</tweet> 

Answer 2

대신

<tweet nameOfThePerson="randomName" 
     tweeterHandler="handler1" 
     tweetText="firstText"></tweet>