繁体   English   中英

带有模板出口的角组件

Angular component with template outlet

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个问题组件,该组件有多个实现,但包含一个通用的标题组件。

我的愿望是创建一个组件,以便给定问题模型,模板将输出正确的问题类型。

我已经看到了ngTemplateOutlet的想法,但是关于它如何工作的文档很难理解(也许不适合您,但对我来说),并且我无法通过查看示例来确定如何实现此目的。 我认为我不必在哪里重新发明轮子,这似乎是常见的要求。

我之前的尝试包括一个[ngSwitch]容器,其中包含许多不同的*ngSwitchCase ,但是如果我可以在外部定义模板并让questionComponent知道从questionType到可用的ng-template的映射,那将是理想的选择。

例如

export class question { 
  constructor(public title: string, public questionType: string, public answer: any) {} 
}

@Component({
  selector: 'app-question',
  template: `
    <div class="question">
      <p>{{q.title}}</p>
      <ng-container [ngTemplateOutlet]="theRightTemplate">
      </ng-container>
    </div>
  `})
export class QuestionComponent {
  @Input()
  question: Question;
}

我目前正在使用Angular 7

有人可以帮我弄清楚如何实现吗?

3 个回复

好的,我给你举个例子,并解释一下:

链接: https : //github.com/100cm/at-ui-angular/blob/master/src/app/components/switch/switch.component.ts

对于您的代码,我们必须定义一个@Input变量

export class question { 
  constructor(public title: string, public questionType: string, public answer: any) {} 
}

@Component({
  selector: 'app-question',
  template: `
    <div class="question">
      <p>{{q.title}}</p>
      <ng-container [ngTemplateOutlet]="theRightTemplate">
      </ng-container>
    </div>
  `})
export class QuestionComponent {
  @Input()
  question: Question;
  @Input()
  myTemplate:TemplateRef
}

然后将<ng-container>更改为<ng-template> (我认为<ng-container>不能用于模板出口

<ng-template [ngTemplateOutlet]="myTemplate">

好的,然后立即使用您的<app-question>

what_ever_html:

<app-question [myTemplate]="my_template"></app-question>

<ng-template #my_template> i am worked now !</ng-template>

希望这对你有帮助!

使用模板制作动态组件有两件重要的事情。

  1. Template -第一个是模板本身,需要注入,这里要注意的重要一点是,它需要带有附加信息的context ,在您情况下, question详细信息。
  2. ngTemplateOutlet需要在其中注入模板的位置。 它接受templatetemplate context

这是简单的例子-

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

@Component({
  selector: 'my-app',
  template: `
  <ng-container *ngTemplateOutlet="templateRef; context: {entry: entry}"></ng-container>
  <ng-template #templateRef let-entry="entry">My entry is {{entry | json}}</ng-template>
  `,
})
export class AppComponent  {
  entry = {
    label: 'This is a label',
    description: 'Desc',
  }
}

示例1- https://stackblitz.com/edit/ng-template-outlet-6pzddz

示例2- https://stackblitz.com/edit/angular-reusable-components-ngtemplateoutlet-5nidmd

您可以使用@ContentChild('tableHeader') header: TemplateRef<any>; QuestionComponent您可以使用ContentChild从内容DOM中获取与选择器匹配的第一个元素或指令。

如果内容DOM更改,并且有一个新的子项与选择器匹配,则该属性将被更新。

您的子component.html读为

<ng-template [ngTemplateOutlet]="header"></ng-template> <ng-template [ngTemplateOutlet]="body"></ng-template>

[ngTemplateOutlet]将读取属性值并将内容粘贴到指定模板中的位置

最后,当您从父组件中引用内容时,它将与上述模板一起放置

将内容从父母传递给孩子的方法

<app-question> <ng-template #tableHeader></ng-template> <ng-template #body></ng-template> </app-question>

<ng-template>所有内容都将放置在子component

在子组件中,您可以添加尽可能多的模板,在这些模板中,所有模板都将与父组件传递的内容一起放置-这是将内容从父组件传递给子组件的另一种方式-希望这会有所帮助-谢谢您!

点击这里参考

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题
 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM