动态将模板传递给子组件

如何解决动态将模板传递给子组件

我想根据活动的导航点动态加载页面内容。

export class Sub_navigation_item {
    constructor(
      public title: string,public templateName: string
    ) {}
  }

因此，我有一个导航项目，其ID来自ng-template。 我想根据此ID将内容传递给子组件。

这些是我的导航项：

this.navbarItems = [
        new Sub_navigation_item('General','generalTemplate'),new Sub_navigation_item('Actions','actionTemplate'),new Sub_navigation_item('Inactivity','inactivityTemplate')
];

这是我的一般页面模板：

<ng-template #generalTemplate>
    <div class="generalContent">
        <div>
         hello world
       </div>
  </ng-template>

这是我的子组件：

HTML：

<div class="container">
    <div class="row">
        <div class="col col-lg-8">
            <h1>{{title}}</h1>
        </div>
    </div>
</div>

<ng-container [ngTemplateOutlet]="content"></ng-container>

TS：

import { Sub_navigation_item } from './../../../../models/sub_navigation_item';
import {
    Component,OnInit,Input,TemplateRef
  } from '@angular/core';

  import { RestApiService } from './../../../../services/api/rest-api.service';
  import { Actionevent_Type } from 'src/app/models/actionEvent';

  @Component({
    // tslint:disable-next-line:component-selector
    selector: 'bot-detail-page',templateUrl: './bot-detail-page.component.html',styleUrls: ['./bot-detail-page.component.scss']
  })
  export class BotDetailPageComponent implements OnInit {

    @Input() title: string;
    @Input() content: TemplateRef<any>;

    constructor(private restApiService: RestApiService) {
    }

ngOnInit() {
}

}

我正在尝试通过ngFor创建内容：

<bot-detail-page [title]="navbarItem.title" [content]="navbarItem.templateName"> 
            
</bot-detail-page>

如果我将'generalTemplate'传递给[content]，则可以，但是navbarItem.templateName不起作用。

解决方法

在父组件中，您需要将所有模板都放在.html中。 然后，在父组件的类中，您需要获取对所有这些模板的引用，选项之一是通过ViewChild属性装饰器进行选择。然后，您可以将这些模板传递到子组件的content输入中。

在父组件的类中：

export class ParentComponent {    
  @ViewChild('generalTemplate') gt: TemplateRef<any>;
  @ViewChild('actionTemplate') at: TemplateRef<any>;
}

您可以引入任何中间逻辑来选择目标模板（这里我们只是直接传递gt）：

<bot-detail-page [title]="navbarItem.title" [content]="gt">

,

正如评论ngTemplateOutlet中提到的@D Pro期望模板引用而不是字符串。我建议您创建指令以获取元素的TemplateRef，如下所示：

sub-navigation.directive.ts

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

@Directive({
  selector: '[appSubNavigation]'
})
export class SubNavigationDirective {
  @Input() public title:string;
  constructor(public template: TemplateRef<any>) { }

}

然后在ng-template上的父组件html place指令中

<ng-template appSubNavigation title="General">
    <div class="generalContent">
        <div>
         hello world
       </div>
    </div>
  </ng-template>

<app-bot-details *ngIf="navbarItem?.length"

[title]="navbarItem[0].title" [content]="navbarItem[0].template"
> 
</app-bot-details>

在组件ts中，使用ViewChildren获取所有已定义的templateRef

@ViewChildren(SubNavigationDirective)  set subNavigation(ref:QueryList<SubNavigationDirective>){
    this.navbarItem = ref.toArray();
  }; 

Working Example