将模板动态传递给子组件

Question

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

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

因此，我有一个导航项目，ID来自ng模板。我想将内容传递给基于此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不工作。

Answer 1

在父组件中，您需要在.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">

Answer 2

注释ngTemplateOutlet中提到的@D Pro需要模板引用而不是字符串。我建议你创建指令来获取元素的TemplateRef，比如这样的：

子导航.指令.ts

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

然后在父组件html中，将指令放置在ng模板上

<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获取所有定义的模板参考

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

工作示例