问题描述
我认为这很简单,但由于某种原因我无法弄清楚。 我正在构建一个简单的子菜单。我已经创建了组件:
export class SubMenuComponent implements OnInit {
@input() links: MenuItem[];
constructor() {}
ngOnInit(): void {}
}
MenuItem 看起来像这样:
export class MenuItem {
label: string;
path: string;
open: boolean;
children?: MenuItem[];
}
Html 如下所示:
<ul class="app-sub-menu list-unstyled">
<li *ngFor="let link of links" routerLinkActive="active"><a class="btn-link" [routerLink]="link.path"
routerLinkActive="active" [routerLinkActiveOptions]="{exact: link.path === '/'}">{{ link.label }}</a>
<span class="toggle" *ngIf="link.children?.length" (click)="link.open = !link.open">
<mat-icon *ngIf="link.isActive || link.open">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!link.isActive && !link.open">keyboard_arrow_up</mat-icon>
</span>
<ul class="list-unstyled" [class.open]="link.open" *ngIf="link.children?.length">
<li *ngFor="let link of link.children" routerLinkActive="active"><a class="btn-link"
routerLinkActive="active" [routerLink]="link.path" #link>{{ link.label }}</a>
<span class="toggle" *ngIf="link.children?.length" (click)="link.open = !link.open">
<mat-icon *ngIf="link.isActive || link.open">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!link.isActive && !link.open">keyboard_arrow_up</mat-icon>
</span>
<ul class="list-unstyled" [class.open]="link.open" *ngIf="link.children?.length">
<li *ngFor="let link of link.children" routerLinkActive="active"><a class="btn-link"
routerLinkActive="active" [routerLink]="link.path">{{ link.label }}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
如您所见,当前的子菜单仅下降了 3 个级别。我希望它是无限嵌套的。 所以我决定使用 ng-template,但我无法让它工作。 我认为这会很简单:
<ul class="app-sub-menu list-unstyled">
<ng-template *ngTemplateOutlet="link" *ngFor="let link of links"></ng-template>
</ul>
<ng-template #link>
<li *ngFor="let link of links" routerLinkActive="active"><a class="btn-link" [routerLink]="link.path"
routerLinkActive="active" [routerLinkActiveOptions]="{exact: link.path === '/'}">{{ link.label }}</a>
<span class="toggle" *ngIf="link.children?.length" (click)="link.open = !link.open">
<mat-icon *ngIf="link.isActive || link.open">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!link.isActive && !link.open">keyboard_arrow_up</mat-icon>
</span>
<ul class="list-unstyled" [class.open]="link.open" *ngIf="link.children?.length">
<ng-template *ngTemplateOutlet="link" *ngFor="let link of link.children"></ng-template>
</ul>
</li>
</ng-template>
但是当我尝试使用它时,出现错误:
前缀的属性所以我改成这样:
templateRef.createEmbeddedView 不是函数
有谁知道我能做些什么来让它发挥作用?
阅读:
看起来我的模板使用不正确,所以我将其更改为:
<ul class="app-sub-menu list-unstyled">
<ng-container *ngTemplateOutlet="link; context: { $implicit: links }"></ng-container>
</ul>
<ng-template #link let-links>
<li *ngFor="let link of links" routerLinkActive="active"><a class="btn-link" [routerLink]="link.path"
routerLinkActive="active" [routerLinkActiveOptions]="{exact: link.path === '/'}">{{ link.label }}</a>
<span class="toggle" *ngIf="link.children?.length" (click)="link.open = !link.open">
<mat-icon *ngIf="link.isActive || link.open">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!link.isActive && !link.open">keyboard_arrow_up</mat-icon>
</span>
<ul class="list-unstyled" [class.open]="link.open" *ngIf="link.children?.length">
<ng-container *ngTemplateOutlet="link; context: { $implicit: link.children }"></ng-container>
</ul>
</li>
</ng-template>
但我仍然收到错误:(
templateRef.createEmbeddedView 不是函数
解决方法
我想通了,这是因为我的模板ID与实际模型相同。所以我改成这样:
<ul class="app-sub-menu list-unstyled">
<ng-template #nestedList let-links>
<li *ngFor="let link of links" routerLinkActive="active"><a class="btn-link" [routerLink]="link.path"
routerLinkActive="active" [routerLinkActiveOptions]="{exact: link.path === '/'}">{{ link.label }}</a>
<span class="toggle" *ngIf="link.children?.length" (click)="link.open = !link.open">
<mat-icon *ngIf="link.isActive || link.open">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="!link.isActive && !link.open">keyboard_arrow_up</mat-icon>
</span>
<ul class="list-unstyled" [class.open]="link.open" *ngIf="link.children?.length">
<ng-container *ngTemplateOutlet="nestedList; context: { $implicit: link.children }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="nestedList; context: { $implicit: links }"></ng-container>
</ul>