Angular不渲染秒
我正在尝试构建一个“SmartLinkComponent”,它可以区分内部链接和外部链接,同时可以将任何html内容包装在标记中。我提出了以下解决方案smart-link.component.html:Angular不渲染秒,angular,angular2-ngcontent,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="isInt
<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>
然后仅为内部链接渲染角度。
当它没有任何相关的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);
}
}
正如@Shikha在评论中提到的,如果不指定“select”指令,就不可能使用多个ng内容元素。使用angular GitHub repository的此响应,我能够修复解决方案,只包含ng容器一次,如下所示:
<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>
若要执行多内容投影,则需要至少为其中一个内容指定“选择”。
<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>