[英]Angular2 child component as data
假设我有两个组成部分: parent
和child
。 HTML将如下所示:
<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?
}
}
如何从父级中访问子组件并获取其内容?
此外,我不希望自动渲染孩子。 根据某些条件,我可能会选择不显示某些孩子。
谢谢。
<ng-content>
要将内容投影到元素(包含),您需要<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">
但是这不适用于您的用例,因为<ng-content>
不会生成内容,它只会投影它(作为一个放置在子组件模板中显示子项的放置器。
即使*ngFor
会生成3个<ng-content>
元素,子元素也只会在第一个<ng-content>
元素中显示一次。
<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时,在Binding事件中解释了一种更灵活,更强大的方法(来自@kemsky的评论)
<template>
, @ViewChildren()
和*ngForTemplate
如果将子项包装在<template>
标记中,则可以使用@ContentChildren()
访问它们,并使用*ngFor
和*ngForTemplate
插入它们。
我正在使用内部*ngFor
进行一点点破解。 有一种更好的方法正在进行中( 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 {}
另请参阅如何在没有ngFor的情况下多次重复HTML片段,如果没有其他@Component , ngTemplateOutlet
可以获得更多ngTemplateOutlet
Plunker示例。
更新Angular 5
ngOutletContext
已重命名为ngTemplateOutletContext
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
也许你正在寻找这个? https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var
您可以将本地var分配给父视图中的任何子项
<child #child1></child>
<child #child2></child>
<button (click)="child1.doSomething()">Trigger child1</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.