Angular 带有动态输出占位符的组件 ng-content 传递模板

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 中提供的日期输出日期名称、周数和年份。

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

@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>

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>

Angular 带有动态输出占位符的组件 ng-content 传递模板

Angular component ng-content passing template with dynamic output placeholders

angular2-ngcontent

angular-components

angular

父组件

my-component.ts

my-component.html