角度不渲染秒<ng-content></ng-content>

Question

我正在尝试构建一个"SmartLinkComponent"，它可以区分内部和外部链接，同时可以将任何html内容包装在标签中。我想出了以下解决方案(smart-link.component.html(：

<a *ngIf="!isInternal" [href]="link" target="_blank" [title]="title">
<ng-content></ng-content>
</a>
<a *ngIf="isInternal" [routerLink]="link" [title]="title">
<ng-content></ng-content>
</a>

解析isInternal变量的逻辑完美运行，因此我在这里不包括代码。

问题是此代码仅适用于布局中出现的第一个代码。上面发布的代码仅呈现!isInternal的链接。当我像这样交换代码时：

<a *ngIf="isInternal" [routerLink]="link" [title]="title">
<ng-content></ng-content>
</a>
<a *ngIf="!isInternal" [href]="link" target="_blank" [title]="title">
<ng-content></ng-content>
</a>

然后 Angular 仅渲染内部链接的<ng-content></ng-content>。 当它没有任何关联的select指令时，<ng-content></ng-content>似乎只能在布局中使用一次，但我找不到任何有关此的文档。但是，这里的*ngIf条件是相互排斥的，所以我真的不确定问题出在哪里。

编辑：这是smart-link.component.ts的(匿名(代码：

import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-smart-link',
templateUrl: './smart-link.component.html',
styleUrls: ['./smart-link.component.scss']
})
export class SmartLinkComponent implements OnInit {
isInternal: boolean = true;
@Input("href") originalLink: string;
@Input() title: string;
link: string;

constructor() {
}
ngOnInit() {
if (this.originalLink) {
console.log('original link', this.originalLink);
if (some rules) {
this.isInternal = true;
this.link = // transform link
} else {
this.isInternal = false;
this.link = this.originalLink;
}
}
console.log('evaluating link', this.originalLink, ' as internal ', this.isInternal, this.link);
}
}

Answer 1

正如@Shikha评论中提到的，如果不指定"select"指令，就不可能使用多个ng-content元素。使用来自角度 GitHub 存储库的此响应 https://github.com/angular/angular/issues/24567 我能够修复解决方案以仅包含 ng-container 一次，如下所示：

<a *ngIf="link && !isInternal" [href]="link" target="_blank" [title]="title">
<ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
</a>
<a *ngIf="link && isInternal" [routerLink]="link" [title]="title">
<ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
</a>
<ng-template #linkTemplate>
<ng-content></ng-content>
</ng-template>