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

回答

相关问题