如何在 Angular 组件中渲染带有上下文的模板？

Question

我在 Angular8 中使用 ng-template 进行复数翻译，以便从组件向用户显示通知，但在附加到 DOM 因为上下文还没有绑定。我如何渲染一个模板及其上下文并为此目的获取其内部 HTML？

我尝试使用 ViewContainerRef 渲染模板并将其附加到 DOM 并且它工作正常，但我不想将某些内容附加到 DOM 并稍后阅读。

模板：

<ng-template #activeDeactiveSuccessMessage let-card="card">
    <span i18n="@@card.notification">Notification</span>
    <span i18n>{card.lockStatus, select,
      LOCKED {Card number ending with {{card.number}} has been deactivated.}
      UNLOCKED {Card number ending with {{card.number}} has been activated.}
      other {Card number status changed to {{card.lockStatus}} }}</span>
</ng-template>

组件代码：

@ViewChild('activeDeactiveSuccessMessage', { static: false }) private activeDeactiveSuccessMessage: TemplateRef<any>;

Bellow 是将呈现的模板附加到 DOM 的代码的一部分并且工作正常：

let el = this._viewContainerRef.createEmbeddedView(this.activeDeactiveSuccessMessage, { card });

但是我不想附加到DOM，想要在附加之前在组件内部获取呈现的模板。使用波纹管代码获取文本，但对于需要上下文的第二个节点，returns 评论！：

let el = this.activeDeactiveSuccessMessage.createEmbeddedView({ card });
console.log(el.rootNodes[0].innerHTML); // -->     Notification
console.log(el.rootNodes[1].innerHTML); // -->     <!----><!----><!----><!---->

我希望第二个节点的输出为 Card number ending with 6236 has been deactivated.。

Answer 1

问题已解决！

我遇到的问题是因为我要求在运行时翻译脚本中的警告消息，我不想使用ngx-translate。幸运的是，在angular 9 中，在@angular/localize 的帮助下，这个问题已经解决，并且可以很容易地将文本翻译成脚本：

@Component({
  template: '{{ title }}'
})
export class HomeComponent {
  title = $localize`You have 10 users`;
}

要阅读更多内容，请访问 https://blog.ninja-squad.com/2019/12/10/angular-localize/

如何在 Angular 组件中渲染带有上下文的模板？

How can I render template with context in an Angular component?

javascript

angular-i18n

angular