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

时间:2019-10-22 14:24:32

标签: angular angular2-ngcontent

我正在尝试构建一个“ 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>

然后,角度仅对内部链接呈现<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);
    }

}

1 个答案:

答案 0 :(得分:0)

正如@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>