NativeScript-将内容从父组件传递到子组件

在过去的两天里，我一直在寻找这个，所以我决定寻求帮助。 假设我们有一个名为ParentComponent的父组件，还有一个名为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 {}

从“@angular/core”导入{Component}；
@组成部分({
选择器：“SomeComponent”，
模板：`
#此处的容器内容#
`,
})
导出类SomeComponent{}

..和ParentComponent模板应为：

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 {}

从“@angular/core”导入{Component}；
从“./some/where/…”导入{SomeComponent}”；
@组成部分({
选择器：“父项”，
模板：`
`,
})
导出类ParentComponent{}

考虑到前面的示例，我如何获得在我的ParentComponent中定义的“”内的内容，以便在保留的“#容器内容在此处#”区域中的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>

这看起来像是我以前在react native中做的非常简单的事情，我无法在NS上工作

---

提前感谢。

您可以使用ng内容标记将内容从父容器转移到子容器。我相信您只需要将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 {}

从“@angular/core”导入{Component}；
@组成部分({
选择器：“SomeComponent”，
模板：`

你也可以在我写的slides插件中看到一个有效的例子。是的。我已经尝试过了，但没有成功。可能是我正在做的其他事情阻碍了它。至少现在我知道这是一种方法。TnxI没有将我的组件添加到“声明”：@NgModule（{声明：[AppComponent，SomeComponent]，Tnx@theOriginalJoshNp，我自己经常忘记这一点。