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

考虑到前面提到的例子，我怎样才能获得内容＆＃34;＆lt; SomeComponent＆gt;＆＃34;在我的ParentComponent中定义，以便在保留的＃34; #CONTAINER CONTENT HERE＃＆＃34;中的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上工作。

提前致谢。

Answer 1

您可以使用ng-content标记将内容从父容器转移到子容器。我相信你需要为你的SomeContent组件添加ng-content所需的内容，如下所示：

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 - 将内容从Parent传递到Child组件

1 个答案: