Angular2子组件作为数据 [英] Angular2 child component as data

问题描述

比方说，我有两个组成部分:parent和child. HTML看起来像这样:

Let's say I have two components: parent and child. The HTML would look like this:

<parent title="Welcome">
    <child name="Chris">Blue Team</child>
    <child name="Tom">Red Team</child>
</parent>

最终输出如下:

<h1>Welcome</h2>
<ul>
    <li><b>Chris</b> is on the Blue Team</li>
    <li><b>Tom</b> is on the Red Team</li>
</ul>

父组件:

@Component({
  selector: 'parent',
  directives: [ChildComponent], // needed?
  template: `
    <h1>{{title}}</h1>
    <ul>
       <li *ngFor="#child of children()">{{child.content}}<li>
    </ul>`
})
export class ParentComponent {

    @Input() title;

    children() {
        // how?
    }

}

如何从父级内部访问子级组件并获取其内容?

How do I access the child components from within the parent and get their content?

此外，我不希望这些子项被自动渲染.根据某些条件，我可能选择不显示某些孩子.

Also, I don't want the children to be automatically rendered. Depending on some conditions I may choose not to show certain children.

谢谢.

推荐答案

<ng-content>

<ng-content>

要将内容投影到元素(包含)，您将需要<ng-content>元素，例如

For projecting content to an element (transclusion) you would need the <ng-content> element like

@Component({
  selector: 'parent',
  directives: [ChildComponent], // needed?
  template: `
    <h1>{{title}}</h1>
    <ul>
       <li *ngFor="letchild of children()">
         <ng-content></ng-content>
       </li>
    </ul>`
})

<ng-content select="xxx">

<ng-content select="xxx">

但是这不适用于您的用例，因为<ng-content>不会产生内容，它只会投影内容(用作在组件模板中显示子项的Placehoder.

but that won't work for your use case because <ng-content> doesn't produce content, it only projects it (works as a placehoder where children are displayed within your components template.

即使*ngFor会产生3个<ng-content>元素，但子代只会在第一个<ng-content>元素中显示一次.

Even though *ngFor would produce 3 <ng-content> elements, the children would only be displayed once in the first <ng-content> element.

<ng-content>允许使用类似

<ng-content select="[name=Chris]"></ng-content>

其中的模板类似

<ul>
   <li>
     <ng-content select="[name=Chris]"></ng-content>
   </li>
</ul>`

会导致

<h1>Welcome</h2>
<ul>
    <li><b>Chris</b> is on the Blue Team</li>
</ul>

绑定中介绍的一种更灵活，更强大的方法Angular 2中使用ngForTemplate时发生的事件(来自@kemsky的评论)

A more flexible and powerful approach explained in Binding events when using a ngForTemplate in Angular 2 (from @kemsky s comment)

<template>，@ViewChildren()和*ngForTemplate

<template>, @ViewChildren(), and *ngForTemplate

如果将子级包装在<template>标记中，则可以使用@ContentChildren()访问它们，并使用*ngFor和*ngForTemplate插入它们.

If you wrap the children in <template> tags you can access them using @ContentChildren() and insert them using *ngFor and *ngForTemplate.

我在这里对内部使用了一些技巧.有一个更好的方法正在进行中(ngTemplateOutlet https://github.com/angular/angular/pull/8021 已合并)

I am using a little hack here with the inner *ngFor. There is a better approach work in progress (ngTemplateOutlet https://github.com/angular/angular/pull/8021 already merged)

@Component({
  selector: 'parent',
  template: `
    <h1>{{title}}</h1>
    <ul>
      <li *ngFor="let child of templates">
         <!-- with [child] we make the single element work with 
              *ngFor because it only works with arrays -->
         <span *ngFor="let t of [child]" *ngForTemplate="child"></span>
      </li>
    </ul>
    <div>children:{{children}}</div>
    <div>templates:{{templates}}</div>
    `
})
export class ParentComponent {

  @Input() title;
  @ContentChildren(TemplateRef) templates;
}

@Component({
    selector: 'my-app',
    directives: [ParentComponent],
    template: `
    <h1>Hello</h1>
<parent title="Welcome">
  <template><child name="Chris">Blue Team</child></template>
  <template><child name="Tom">Red Team</child></template>
</parent>    
    `,
})
export class AppComponent {}

柱塞示例

另请参见

See also How to repeat a piece of HTML multiple times without ngFor and without another @Component for more ngTemplateOutlet Plunker examples.

更新Angular 5

ngOutletContext重命名为ngTemplateOutletContext

另请参见 https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

这篇关于Angular2子组件作为数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！