Угловой не отдает второй - PullRequest
Новая
       51

Угловой не отдает второй

0 голосов
/ 22 октября 2019

Я пытаюсь создать '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);
    }

}
...