Angular新手技术咨询：在多组件模板中插入HTML元素应选用TemplateRef结合@ViewChild()还是指令？

Hey there! As an Angular newbie, it makes total sense to wonder which approach fits best for reusing your alert template. Let’s break down both options and when to use each:

Option 1: TemplateRef + @ViewChild() #

This approach works great if you want to reuse the template within a single component or pass it to child components via inputs. It’s straightforward for small-scale reuse.

How to implement it: #

1. First, define your template in a shared place (like a parent component or a shared module’s component):

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

2. In the component class, use @ViewChild() to get a reference to the template:

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-shared-alerts',
  templateUrl: './shared-alerts.component.html'
})
export class SharedAlertsComponent {
  @ViewChild('alertMessage') alertMessageTemplate!: TemplateRef<any>;
  displayProductInfo = false; // You can manage this state here or pass it in
}

3. To use it in another component (e.g., a child component), pass the template as an input and render it with ngTemplateOutlet:

<!-- In child component template -->
<ng-container [ngTemplateOutlet]="alertTemplate" 
              [ngTemplateOutletContext]="{ $implicit: !displayProductInfo }"></ng-container>

// Child component class
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-product-viewer',
  templateUrl: './product-viewer.component.html'
})
export class ProductViewerComponent {
  @Input() alertTemplate!: TemplateRef<any>;
  displayProductInfo = false; // Local state or passed from parent
}

Option 2: Custom Directive/Component #

This is the better choice when you want to reuse the template across many components with minimal setup. Directives (including components, which are a special type of directive) let you encapsulate the template and any related logic into a reusable unit that you can drop into any template with a simple tag.

How to implement it: #

1. Create a dedicated component for your alert (the most beginner-friendly way to encapsulate reusable UI):

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

@Component({
  selector: 'app-alert-message',
  template: `
    <p *ngIf="!displayProductInfo" id="alertMessage">Please enter a bar code to display a model.</p>
  `
})
export class AlertMessageComponent {
  @Input() displayProductInfo = false; // Let parent components control the visibility state
}

2. Now you can use it in any component template with just one line—no extra references or context setup needed:

<!-- In any component that needs the alert -->
<app-alert-message [displayProductInfo]="displayProductInfo"></app-alert-message>

Which Should You Choose? #

• Use TemplateRef + @ViewChild() if:
  • You only need to reuse the template in 1-2 components
  • You want full control over how the template is contextualized in each usage
• Use a Custom Component if:
  • You need to reuse the alert across many components
  • You want to encapsulate the alert’s logic (like visibility control) into a single, maintainable place
  • You prefer a clean, intuitive syntax that feels like using a pre-built UI block

Since you’re new to Angular, starting with the component approach is probably the easiest—it’s like creating a reusable "widget" you can drop anywhere without getting tangled up in template references.

内容的提问来源于stack exchange，提问作者olivier