將值傳遞給ngContent內的組件

我試圖將一個父組件（MainComponent）的值傳遞給子組件（ChildComponent），但子組件未在父模板中聲明，而是在內部加載來自父級父組件（AppComponent）的ngContent。將值傳遞給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; 
}

我創建了一個plunker來顯示我的問題：Demo。

我更新了我的問題以包含更多細節，我期望允許MainComponent持有不同的子組件並將其聲明在頂層組件（AppComponent）中。

來源

2016-08-30 Geo Perez

您沒有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

希望這有助於！

來源

2016-08-30 16:56:15

我想從MainComponent中獲取變量，將它傳遞給ChildComponent。 –

這就是'ng-content'的作用方式，它從需要從實際的HTML定義的地方進行綁定，在你的情況下，在AppComponent中，如果你想要傳遞一些變量從main到child，你可以直接定義子組件'主component'。乾杯! –

有沒有一種方法來定義一個模型，我可以在幾個AppComponent中插入不同的ChildComponents到MainComponent？ –

將值傳遞給ngContent內的組件

回答

相關問題