Angular 不渲染第二个 <ng-content></ng-content>答案

【问题标题】：Angular doesn't render second <ng-content></ng-content>Angular 不渲染第二个 <ng-content></ng-content>
【发布时间】：2019-10-22 14:24:32
【问题描述】：

我正在尝试构建一个“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>。当<ng-content></ng-content> 没有任何关联的select 指令时，它甚至似乎只能在布局中使用一次，但我找不到任何有关此的文档。但是，这里的*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);
    }

}

【问题讨论】：

如果您正在执行多内容投影，那么您需要为其中至少一个指定选择。

标签： angular angular2-ngcontent

【解决方案1】：

正如@Shikha 在评论中提到的，如果不指定“select”指令，就不可能使用多个 ng-content 元素。使用来自 Angular 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>

【讨论】：