带动态输出占位符的角度组件ng内容传递模板

Question

有可能拥有一个可以处理这样的动态投影的组件吗？

<my-component [date]="2022-03-22">
<p>This date falls on a <strong #dayName></strong>! It is on week number <span #weekNum></span> of year <span #year></span>.</p>
</my-component>

传递到组件中的HTML代码有几个ElementRef占位符，用于根据组件@Input中提供的日期输出日期名称、周数和年份。

我现在的障碍是，当我试图像这样访问ElementRef时，my-component无法检测到它们：

@Component({
selector: 'my-component'
})
export class MyComponent implements AfterViewInit {
@ViewChild('dayName') elemDayName!: ElementRef;
@ViewChild('weekNum') elemWeekNum!: ElementRef;
@ViewChild('year') elemYear!: ElementRef;
ngAfterViewInit() {
this.elemDayName.nativeElement.innerHTML = 'Tuesday';
this.elemWeekNum.nativeElement.innerHTML = 12;
this.elemYear.nativeElement.innerHTML = 2022;
}
}

这样的事情可行吗？还是我使用了错误的方法来实现这个功能？

Answer 1

据我所知，@ViewChild只能用于访问在组件自己的模板中声明的元素。我建议您使用其他Angular功能，如创建其他组件或指令等，并在所有这些元素之间使用公共服务来共享@Input参数中传递的信息。

Answer 2

对于任何人来说，我设法用这种方式解决了它：

父组件

<my-component [date]="2022-03-22">
<p>This date falls on a <strong #dayName></strong>! It is on week number <span #weekNum></span> of year <span #year></span>.</p>
</my-component>

我的组件.ts

@Component({
selector: 'my-component'
})
export class MyComponent implements AfterContentInit {
@Input() date: string;
@ContentChild('dayName') elemDayName!: ElementRef;
@ContentChild('weekNum') elemWeekNum!: ElementRef;
@ContentChild('year') elemYear!: ElementRef;
ngAfterContentInit() {
/* do any custom processing as needed and update the template using innerHTML */
this.elemDayName.nativeElement.innerHTML = 'Tuesday';
this.elemWeekNum.nativeElement.innerHTML = 12;
this.elemYear.nativeElement.innerHTML = 2022;
}
}

my-component.html

<ng-content></ng-content>