NativeScript - 將內容從父組件傳遞到子組件

我在過去的2天中一直在尋找這一切，所以我決定尋求幫助。想象一下，我們有一個名爲ParentComponent的父組件，並且我們還有一個名爲SomeComponent的子組件。NativeScript - 將內容從父組件傳遞到子組件

SomeComponent模板將是：

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

@Component({ 
    selector: "SomeComponent", 
    template: ` 
     <ActionBar title="TestApp"> 
     </ActionBar> 
     <StackLayout style="margin-top:20;"> 
      <Label text="Somenthing on top"></Label> 

      #CONTAINER CONTENT HERE# 

      <Label text="Something in the bottom"></Label> 
     </StackLayout> 
    `, 

}) 
export class SomeComponent {}

..和爲父級的模板將是：

import {Component} from "@angular/core"; 
import {SomeComponent} from "../some/where/..."; 

@Component({ 
    selector: "parent", 
    template: ` 
     <SomeComponent> 
      <Label text="Something here"></Label> 
      <Label text="Something else here"></Label> 
     </SomeComponent> 
    `, 

}) 
export class ParentComponent {}

考慮上述的例子中，我怎麼能進去「< SomeComponent>」所限定的含量我的ParentComponent，要在保留的「#CONTAINER CONTENT HERE＃」區域的SomeComponent中正確顯示？

從理論上講這是因爲如果我最終會是這樣的：

<ActionBar title="TestApp"> 
</ActionBar> 
<StackLayout style="margin-top:20;"> 
    <Label text="Somenthing on top"></Label> 

    <Label text="Something here"></Label> 
    <Label text="Something else here"></Label> 

    <Label text="Something in the bottom"></Label> 
</StackLayout>

它看起來像是很簡單，我以前做的反應本地人，我不能去上班的NS。

在此先感謝。

來源

2017-07-02 alvesdm

您可以使用ng-content標籤將父容器中的內容轉換爲子項。我相信所有你需要NG-內容添加到您的somecontent寫入組件，那麼這將是這樣的：

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

@Component({ 
    selector: "SomeComponent", 
    template: ` 
     <ActionBar title="TestApp"> 
     </ActionBar> 
     <StackLayout style="margin-top:20;"> 
      <Label text="Somenthing on top"></Label> 

      <ng-content></ng-content> 

      <Label text="Something in the bottom"></Label> 
     </StackLayout> 
    `, 

}) 
export class SomeComponent {}

你可以閱讀更多關於transclusion這裏https://toddmotto.com/transclusion-in-angular-2-with-ng-content

還可以看到內部的工作示例我寫的幻燈片插件https://github.com/TheOriginalJosh/nativescript-ngx-slides/blob/master/slides/app/slides/slides.component.ts#L40

來源

2017-07-02 22:04:31 theOriginalJosh

是的。我已經嘗試過，但沒有奏效。這可能是我正在做的其他事情，這是阻礙。至少現在我知道這是做到這一點的方法。 TNX – alvesdm

我沒有加入我的組件，以「聲明」： @NgModule（{ 聲明： AppComponent， SomeComponent ]， TNX @theOriginalJosh – alvesdm

NP，我忘了自己頻繁。 – theOriginalJosh

NativeScript - 將內容從父組件傳遞到子組件

回答

相關問題