如何在Angular中通过@Input属性获取ng模板

我试图创建一个组件，它应该通过@Input属性查找

，并返回它的内容

下面是这个组件的代码

<h2>Template 1</h2>
<my-template id="template1"></my-template>

<h2>Template 2</h2>
<my-template id="template2"></my-template>

模板.component.ts

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

@Component({
  selector: 'my-template',
  templateUrl: './template.component.html'
})
export class TemplateComponent {
  @Input() id: string;

  templateRef: TemplateRef<any>;
}

@ViewChildren(TemplateIdDirective) private templates: QueryList<TemplateIdDirective>;

ngAfterViewInit() {
  this.templateRef = this.getTemplateRefById(this.templates, this.id);
}

getTemplateRefById(templates: QueryList<TemplateIdDirective>, id: string): TemplateRef<any> {
  const directive = templates.find(template => template.id === id);
  return directive ? directive.template : null;
}

从'@angular/core'导入{Component，Input，TemplateRef，ViewChild}；
@组成部分({
选择器：“我的模板”，
templateUrl:“./template.component.html”
})
导出类模板组件{
@Input（）id:string；
templateRef:templateRef

有人能帮我吗？
我在这里找到了解决方案：

我已经创建了一个简单的指令，然后使用它通过id获取模板

模板ID指令

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

@Directive({
  selector: 'ng-template[id]'
})
export class TemplateIdDirective {
  @Input() id: string;

  constructor(public template: TemplateRef<any>) { }
}

从'@angular/core'导入{指令，输入，TemplateRef}；
@指示({
选择器：“ng模板[id]”
})
导出类templateId指令{
@Input（）id:string；
构造函数（公共模板：TemplateRef）{}
}

模板.component.ts

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

@Component({
  selector: 'my-template',
  templateUrl: './template.component.html'
})
export class TemplateComponent {
  @Input() id: string;

  templateRef: TemplateRef<any>;
}

@ViewChildren(TemplateIdDirective) private templates: QueryList<TemplateIdDirective>;

ngAfterViewInit() {
  this.templateRef = this.getTemplateRefById(this.templates, this.id);
}

getTemplateRefById(templates: QueryList<TemplateIdDirective>, id: string): TemplateRef<any> {
  const directive = templates.find(template => template.id === id);
  return directive ? directive.template : null;
}

@ViewChildren（templateId指令）私有模板：QueryList；
ngAfterViewInit（）{
this.templateRef=this.getTemplateRefById（this.templates，this.id）；
}
getTemplateRefById（模板：QueryList，id:string）：TemplateRef{
const指令=templates.find（template=>template.id==id）；
返回指令？directive.template:空；
}
我在这里找到了解决方案：

我已经创建了一个简单的指令，然后使用它通过id获取模板

模板ID指令

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

@Directive({
  selector: 'ng-template[id]'
})
export class TemplateIdDirective {
  @Input() id: string;

  constructor(public template: TemplateRef<any>) { }
}

从'@angular/core'导入{指令，输入，TemplateRef}；
@指示({
选择器：“ng模板[id]”
})
导出类templateId指令{
@Input（）id:string；
构造函数（公共模板：TemplateRef）{}
}

模板.component.ts

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

@Component({
  selector: 'my-template',
  templateUrl: './template.component.html'
})
export class TemplateComponent {
  @Input() id: string;

  templateRef: TemplateRef<any>;
}

@ViewChildren(TemplateIdDirective) private templates: QueryList<TemplateIdDirective>;

ngAfterViewInit() {
  this.templateRef = this.getTemplateRefById(this.templates, this.id);
}

getTemplateRefById(templates: QueryList<TemplateIdDirective>, id: string): TemplateRef<any> {
  const directive = templates.find(template => template.id === id);
  return directive ? directive.template : null;
}

@ViewChildren（templateId指令）私有模板：QueryList；
ngAfterViewInit（）{
this.templateRef=this.getTemplateRefById（this.templates，this.id）；
}
getTemplateRefById（模板：QueryList，id:string）：TemplateRef{
const指令=templates.find（template=>template.id==id）；
返回指令？directive.template:空；
}
所以您希望将id值传递给每个子组件？不完全是，我尝试通过将此模板的id传递给我的组件来选择特定的ng模板。所以您希望将id值传递给每个子组件？不完全是，我尝试通过将此模板的id传递给我的组件来选择特定的ng模板。