ngContent内でComponentに値を渡す

Question

親コンポーネント（MainComponent）から子コンポーネント（ChildComponent）に値を渡そうとしていますが、子コンポーネントは親のテンプレートで宣言されていません親の親コンポーネント（AppComponent）からのngContent。

@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; 
} 

私は質問を表示するためにプランナーを作成しました：Demo。

私は、MainComponentが異なる子コンポーネントを保持し、それをトップコンポーネント（AppComponent）で宣言することをどのように期待するかについての質問を更新しました。

Answer 1

bigに変数AppComponentが定義されていないため、値が表示されません。

Notice一重引用符は"'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

は、この情報がお役に立てば幸いです！