ngContent 내에서 구성 요소에 값 전달

Question

상위 구성 요소 (MainComponent)에서 하위 구성 요소 (ChildComponent)로 값을 전달하려고하지만 하위 구성 요소가 상위 템플릿에 선언되어 있지 않고 대신 내부로드됩니다. 부모의 친 컴퍼넌트 (AppComponent)의 ngContent Demo :

@Component({ 
    selector: 'my-app', 
    template: '<div>' + 
    '<main-component><child-component [big]="big"></child-component></main- component>' + 
    '<main-component><childuo-component [small]="big"></childuo-component></main-component>' + 
    '</div>' 
}) 
export class AppComponent { } 

@Component({ 
    selector: 'main-component', 
    template: '<div><div>{{big | lowercase}}</div><div><ng-content></ng-content></div>' 
}) 
export class MainComponent { 
    big: string = "BIG"; 
} 

@Component({ 
    selector: 'child-component', 
    template: '<div>Finally: {{big}}</div>' 
}) 
export class ChildComponent { 
    @Input() big: string; 
} 

@Component({ 
    selector: 'childuo-component', 
    template: '<div>Second?: {{small}}</div>' 
}) 
export class ChildDuoComponent { 
    @Input() small: string; 
} 

은 내 질문을 보여주기 위해 plunker를 만들었습니다.

MainComponent가 다른 하위 구성 요소를 보유하고 상위 구성 요소 (AppComponent)에 선언하도록 허용하는 방법에 대한 자세한 내용을 포함하도록 질문을 업데이트했습니다.

Answer 1

big의 변수는 AppComponent에 정의되어 있지 않으므로 값이 표시되지 않습니다.

작은 따옴표 "'big'" 주위에 올리기.

@Component({ 
    selector: 'my-app', 
    template: `<main-component> 
    <child-component [big]="'big'"></child-component> 
    <child-component [big]="someVar"></child-component> 
    </main-component>` 
}) 
export class AppComponent { 
    someVar = 'someVar'; 
} 

여기이 도움이 Plunker

희망입니다!