Angular 中使用 ChildContent 记录

记录一下学习使用 ChildContent 的试验代码，用的是 Angular 19。

AppComponent 是 parent component， SidebarComponent 是 child component，SidebarBlogCategoriesComponent 是 projected component 。

代码1：使用 ng-content 在 child component 中显示 projected component 的内容

// SidebarBlogCategoriesComponent
@Component({selector: 'cnb-sidebar-blog-categories',template: `<h1>Hello, World!</h1>`
})
export class SidebarBlogCategoriesComponent implements OnInit {constructor() { }ngOnInit() { }
}// SidebarComponent
@Component({selector: 'cnb-sidebar',template: `<p>SidebarComponent</p><ng-content></ng-content>`
})
export class SidebarComponent implements OnInit {@ContentChild(SidebarBlogCategoriesComponent) content?: SidebarBlogCategoriesComponent;constructor() { }ngOnInit() { }ngAfterContentInit(): void {console.log('content: ' +   this.content);}
}// AppComponent
@Component({selector: 'app-root',imports: [SidebarComponent, SidebarBlogCategoriesComponent],template: `<p>AppComponent</p><cnb-sidebar><cnb-sidebar-blog-categories></cnb-sidebar-blog-categories></cnb-sidebar>`
})
export class AppComponent {
}

运行时页面显示结果：

AppComponent

SidebarComponent

Hello, World!

代码2：Directive + TemplateRef 无法显示 projected component 的内容

这是园子博客后台从 angular 15 升级到 angular 19 后遇到的问题，详见 https://q.cnblogs.com/q/151579

注：下面的代码中用 [ngTemplateOutlet] 取代了 <ng-content>

import { NgIf, NgTemplateOutlet } from '@angular/common';
import { Component, ContentChild, Directive, OnInit, TemplateRef } from '@angular/core';// SidebarContentDirective
@Directive({selector: '[cnbSidebarContent]',
})
export class SidebarContentDirective {constructor(public templateRef: TemplateRef<any>) { }
}// SidebarBlogCategoriesComponent
@Component({selector: 'cnb-sidebar-blog-categories',template: `<h1>Hello, World!</h1>`
})
export class SidebarBlogCategoriesComponent implements OnInit {constructor() { }ngOnInit() { }
}// SidebarComponent
@Component({selector: 'cnb-sidebar',imports: [NgIf, NgTemplateOutlet],template: `<p>SidebarComponent</p><div class="sidebar-content" *ngIf="content && content.templateRef"><ng-container [ngTemplateOutlet]="content.templateRef"></ng-container></div>`
})
export class SidebarComponent implements OnInit {@ContentChild(SidebarContentDirective) content?: SidebarContentDirective;constructor() { }ngOnInit() { }ngAfterContentInit(): void {console.log('content: ' + JSON.stringify(this.content));}
}@Component({selector: 'app-root',imports: [SidebarComponent, SidebarBlogCategoriesComponent],template: `<p>AppComponent</p><cnb-sidebar><cnb-sidebar-blog-categories *cnbSidebarContent></cnb-sidebar-blog-categories></cnb-sidebar>`
})
export class AppComponent {
}

页面输出：

AppComponent

SidebarComponent

console.log 的输出：

content: undefined

代码3：通过 ng-template 引用变量解决 Directive + TemplateRef 的问题

解决方法来自 stackoverflow 上 Angular content projection in standalone component 问题的回答：

We cannot use a directive on ng-template since it does not fire, ng-template is a virtual element and is not rendered in the DOM, so the better option, is to just create template reference variables like #cardHeader and #cardMainContent and access these through ContentChild and directly render them on the HTML.

@ContentChild('cardMainContent') cardMainContent!: TemplateRef<any>;
@ContentChild('cardHeader') cardHeader!: TemplateRef<any>;

解决问题的示例代码：

import { NgIf, NgTemplateOutlet } from '@angular/common';
import { Component, ContentChild, Directive, OnInit, TemplateRef } from '@angular/core';// SidebarBlogCategoriesComponent
@Component({selector: 'cnb-sidebar-blog-categories',template: `<h1>Hello, World!</h1>`
})
export class SidebarBlogCategoriesComponent implements OnInit {constructor() { }ngOnInit() { }
}// SidebarComponent
@Component({selector: 'cnb-sidebar',imports: [NgIf, NgTemplateOutlet],template: `<p>SidebarComponent</p><div class="sidebar-content" *ngIf="content && content"><ng-container [ngTemplateOutlet]="content"></ng-container></div>`
})
export class SidebarComponent implements OnInit {@ContentChild('sidebarContent') content?: TemplateRef<any>;constructor() { }ngOnInit() { }ngAfterContentInit(): void {console.log('content: ' + JSON.stringify(this.content?.elementRef));}
}@Component({selector: 'app-root',imports: [SidebarComponent, SidebarBlogCategoriesComponent],template: `<p>AppComponent</p><cnb-sidebar><ng-template #sidebarContent><cnb-sidebar-blog-categories></cnb-sidebar-blog-categories></ng-template></cnb-sidebar>`
})
export class AppComponent {
}

页面显示结果：

AppComponent

SidebarComponent

Hello, World!

console.log 的输出：

content: {"nativeElement":{"__ngContext__":1}}