Angular 如何跨不同组件使用ng模板

发布于03月24日

如何在不同的组件中呈现<ng-template>.假设我有如下组件test:

test.html

<ng-template #content >
   <p> Hello world </p>
</ng-template>

测试.测试

@Component({
    selector: 'test',
    templateUrl: './test.component.html',
    standalone: true,
})
export class TestComponent implements OnInit {}

现在我想在组件A中渲染它.这就是我try 过的(以及许多其他更复杂的版本都不起作用，所以我用这个最简单的版本保留这个问题):

A.html:

<test>
<ng-container *ngTemplateOutlet="content"></ng-container>
</test>

我得到的错误是:

Property 'content' does not exist on type 'AComponent'.
 <ng-container *ngTemplateOutlet="content"></ng-container>

我认为这必须是非常简单的解决，但我已经判断了指南在这post，这solution，和一些其他教程，但他们没有一个工作.

推荐答案

虽然这并不常见，但您可以查询TemplateRef并将其用作任何其他对象——将其作为输入传递，并通过服务共享，只要定义模板的组件的实例存在.

最常见的场景是将TemplateRef作为输入传递给子组件(它自动确保模板在子组件呈现时存在)，子组件使用NgTemplateOutlet指令呈现它.下面是一个使用template reference variable的例子:

// parent template
<ng-template #hello>Hello</ng-template>
<app-child [template]="hello"></app-child>

// child:
@Component({
  selector: 'app-child',
  standalone: true,
  imports: [NgTemplateOutlet],
  template: `<ng-template [ngTemplateOutlet]="template"></ng-template>`,
})
export class ChildComponent {
  @Input() template?: TemplateRef<any>;
}

它通常用于实现可定制组件，这些组件协同工作并维护父子关系，例如菜单、选项卡和树视图.您可以在Material Tabs中找到使用TemplateRef作为输入的示例.

也可以在其他地方共享它，因为TemplateRef可以通过@ViewChild在组件中访问:

@Component({
  selector: 'app-template-definer',
  standalone: true,
  template: `<ng-template>Hello</ng-template>`,
})
export class TemplateDefinerComponent {
  @ViewChild(TemplateRef) template!: TemplateRef<void>;
}

从这里，我们可以将其作为输入传递给子组件，甚至可以通过服务共享.后者会被认为是一种不安全的坏做法，在实施这种方法之前需要考虑很多事情.

请看Playground个展示如何与 children 和全球分享.

Angular 如何跨不同组件使用ng模板

推荐答案

Angular相关问答推荐

Angular material 输入字段中的图标未显示

Angular：浏览器中未显示一些Google Content图标

material 对话框中没有合适的注塑

列表和映射的SCSS语法

MAT折叠面板的动态开启和关闭无法工作

在生产模式下使用带Angular 的 livekit

PrimeNG：如何以编程方式更改分页器中的选定页面？

通过 SignalR 事件组件重定向Angular 页面后不起作用

Angular 从 13.3.8 恢复到 13.3.7

将 html ngModel 值传递给服务 --Angular

根据变量值更改按钮样式

怎样在 Angular 2 或 4 中将输入字段设为只读？

Angular2订阅对子组件中@Input的更改

在 Angular 2 中订阅路由参数和查询参数

即使 withCredentials 为真，Angular 也不会发送在 Set-Cookie 中收到的 Cookie

等待多个promises完成

Angularmaterial步进器：禁用标题导航

在Angular2中获取服务的域名

ng add 与 npm install 在 Angular 6 中的区别

如何将从后端渲染的参数传递给angular2 bootstrap 方法