plnkr演示在这里
@Component({
selector: 'my-demo',
template: `This is <ng-content select=".content"></ng-content>`
})
export class DemoComponent { name = 'Angular'; }
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>
<my-demo><div class="content">In Content</div></my-demo>
`
})
export class AppComponent { name = 'Angular'; }
我想有条件的ng-content
,如
<ng-template *ngIf='hasContent(".content"); else noContent'>
This is <ng-content select=".content"></ng-content>
</ng-template>
<ng-template #noContent>No content</ng-template>
是否有可能在angular2?
template: `This is <span #wrapper>
<ng-content select=".content"></ng-content>
</span>`
@ViewChild('wrapper') wrapper:ElementRef;
ngAfterContentInit() {
console.log(this.wrapper.innerHTML); // or `wrapper.text`
}
也可以看看
- 获取组件孩子一样串
- 访问transcluded内容
冈特Zöchbauer的解决方案是可以接受的,不会影响到使用率,让成分检测出来,我还发现了一个更简单的方法来做到这一点,而不使用任何JSON :empty
<!-- must no content: https://css-tricks.com/almanac/selectors/e/empty/ -->
<!--@formatter:off-->
<div class="title"><ng-content select=".nav-title"></ng-content></div>
<!--@formatter:on-->
.title:empty {
display: none;
}
适用于任何HTML + CSS。
如果你想使用条件语句*ngIf
和else
的是这是可能的
@Component({
selector: 'my-demo',
template: `<div *ngIf='content; else noContent'>
This is <ng-content select=".content"></ng-content>
</div>
<ng-template #noContent>No content</ng-template>`
})
export class DemoComponent { name = 'Angular'; content = true}
演示