[英]Angular2 child component as data
Let's say I have two components: parent
and child
. 假设我有两个组成部分:
parent
和child
。 The HTML would look like this: HTML将如下所示:
<parent title="Welcome">
<child name="Chris">Blue Team</child>
<child name="Tom">Red Team</child>
</parent>
The final output would look like: 最终输出如下:
<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>
The parent component: 父组件:
@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.
根据某些条件,我可能会选择不显示某些孩子。
Thanks. 谢谢。
<ng-content>
For projecting content to an element (transclusion) you would need the <ng-content>
element like 要将内容投影到元素(包含),您需要
<ng-content>
元素
@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">
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. 但是这不适用于您的用例,因为
<ng-content>
不会生成内容,它只会投影它(作为一个放置在子组件模板中显示子项的放置器。
Even though *ngFor
would produce 3 <ng-content>
elements, the children would only be displayed once in the first <ng-content>
element. 即使
*ngFor
会生成3个<ng-content>
元素,子元素也只会在第一个<ng-content>
元素中显示一次。
<ng-content>
allows to use selectors like <ng-content>
允许使用选择器
<ng-content select="[name=Chris]"></ng-content>
where a template like 模板之类的地方
<ul>
<li>
<ng-content select="[name=Chris]"></ng-content>
</li>
</ul>`
would result in 会导致
<h1>Welcome</h2>
<ul>
<li><b>Chris</b> is on the Blue Team</li>
</ul>
A more flexible and powerful approach explained in Binding events when using a ngForTemplate in Angular 2 (from @kemsky s comment) 在Angular 2中使用ngForTemplate时,在Binding事件中解释了一种更灵活,更强大的方法(来自@kemsky的评论)
<template>
, @ViewChildren()
, and *ngForTemplate
<template>
, @ViewChildren()
和*ngForTemplate
If you wrap the children in <template>
tags you can access them using @ContentChildren()
and insert them using *ngFor
and *ngForTemplate
. 如果将子项包装在
<template>
标记中,则可以使用@ContentChildren()
访问它们,并使用*ngFor
和*ngForTemplate
插入它们。
I am using a little hack here with the inner *ngFor
. 我正在使用内部
*ngFor
进行一点点破解。 There is a better approach work in progress ( ngTemplateOutlet
https://github.com/angular/angular/pull/8021 already merged) 有一种更好的方法正在进行中(
ngTemplateOutlet
https://github.com/angular/angular/pull/8021已经合并)
@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. 另请参阅如何在没有ngFor的情况下多次重复HTML片段,如果没有其他@Component ,
ngTemplateOutlet
可以获得更多ngTemplateOutlet
Plunker示例。
update Angular 5 更新Angular 5
ngOutletContext
was renamed to ngTemplateOutletContext
ngOutletContext
已重命名为ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29 另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
Perhaps you're looking for this? 也许你正在寻找这个? https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var
You can assign a local var to any child in parent view 您可以将本地var分配给父视图中的任何子项
<child #child1></child>
<child #child2></child>
<button (click)="child1.doSomething()">Trigger child1</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.