NativeScript

Question

过去两天我一直在寻找这个，所以我决定寻求帮助。假设我们有一个名为 ParentComponent 的父组件，还有一个名为 SomeComponent 的子组件。

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

..ParentComponent 模板为：

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

考虑到前面的例子，我怎样才能让我的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>

我以前在react native中做的事情看起来很简单，我无法在NS上工作。

提前致谢。

Answer 1

您可以使用 ng-content 标签将内容从父容器转换到子容器。我相信你只需要将 ng-content 添加到你的 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 {}

您可以在此处阅读有关嵌入的更多信息 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

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

NativeScript - Passing content from Parent to Child component

angular2-nativescript