如何使用新的 ContentChild 信号 API 更改文本？

Question

我正在尝试迁移我的 Angular 组件以使用新的 ContentChild 信号 API，但我遇到了一些 TypeScript 问题。

这是我使用传统 @ContentChild 装饰器的现有代码：

// child-component.ts
import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child-component.html',
})
export class ChildComponent implements AfterContentInit {
  @ContentChild('headerTitle', { static: true }) headerTitleContent!: ElementRef; // Access projected title
  @ContentChild('headerSubtitle', { static: true }) headerSubtitleContent!: ElementRef; // Access projected subtitle
  @ContentChild('navbar') navTitle!: ElementRef; // Access navbar

  constructor() {
    console.log(this.headerTitleContent); // Access title element
  }

  ngAfterContentInit() {
    this.headerSubtitleContent.nativeElement.textContent = 'Enjoy a customized experience!';
  }
}

我想使用新的 ContentChild 信号 API 实现相同的功能，如下所示：

import { Component } from '@angular/core';
import { contentChild, effect } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child-component.html',
})
export class ChildComponent {
  private headerTitleContent = contentChild<ElementRef<HTMLAnchorElement>>('headerTitle');
  private headerSubtitleContent = contentChild<ElementRef<HTMLAnchorElement>>('headerSubtitle');
  private navTitle = contentChild<ElementRef<HTMLElement>>('navbar');

  constructor() {
    console.log(this.headerTitleContent); // Access title element
    effect(() => {
      if (this.headerSubtitleContent()) {
        this.headerSubtitleContent().nativeElement.textContent = 'HI this is my name'; // Issue occurs here
      }
    });
  }
}

问题 赋值表达式的左侧可能不是可选属性访问。

Answer 1

这是因为如果 DOM 中不存在该元素，则 contentChild 可能是未定义的。

在打字稿中，你无法缩小函数的返回类型。

两种解决方案：

我。在 contentChild 之后需要链，这可以从结果类型签名中消除未定义的情况。如果所需的查询未找到任何结果，Angular 会抛出错误。

private headerSubtitleContent = contentChild.required<ElementRef<HTMLAnchorElement>>('headerSubtitle');

二.您可以为 contentChild 返回值创建一个变量，然后“if”语句缩小值的类型。

 effect(() => {
   let headerSubtitle = this.headerSubtitleContent();
   if (headerSubtitle) {
      headerSubtitle.nativeElement.textContent = 'HI this is my name';
     }
 });

但请注意，此功能仅处于开发者预览版中。在未来的版本中可能会发生变化。