在多个组件中插入一个 HTML 元素

问题描述

我是 angular 的初学者，我希望在我的组件的某些模板中插入这段 HTML 代码：

<ng-template #alertMessage>
        <p *ngIf="!displayProductInfo" id="alertMessage">Please enter a bar code to display a model.</p>
</ng-template>

我应该将 TemplateRef 对象与 @ViewChild() 装饰器一起使用还是应该使用指令？

非常感谢

解决方法

您应该仅通过其他组件上的组件引用来使用它，如果它需要输入绑定，则执行此操作或将其绑定到服务。你可以通过这种方式传递任何你需要的东西——一个指令是矫枉过正的，除非给出一个非常具体的 Dom 事件或对象，否则 ViewChild 对你没有多大作用。正确的方法如下所示-当然还有您的组件名称。如果你想将它传递给每个单独的父级的变量

<app-your-component [YOURINPUTRECEIVED]="yourlocalinputsent"></app-your-component>

在导入的组件打字稿中

@Input() YOURINPUTRECEIVED ?: any;

或使用 rxjs 通过具有 行为主题 或 主题 的服务绑定它。

这样您就可以随意使用该组件并将其导入到每个模板中。