router锚点和html锚点,关于角度：如何在锚点上有条件地使用[href]或[routerLink]？...

我需要将相同的锚定链接有条件地指向本地或外部资源。 我试过了

test

但这是行不通的。 我没有任何错误，但是它指向同一个本地页面，并且忽略了外部URL。 有任何想法吗？

另一个选择是构造链接，但是我找不到任何文档来访问服务内部的routerLink

编辑：我知道我可以使用*ngIf克隆整个链接，但我不想这样做，我的链接包含带有很多选项的视频标签

最简单的方法是使用*ngIf / else：

External

Internal

EDIT＃1 ：(丑陋的解决方法)

由于您不想使用*ngIf(我仍然不明白为什么)，您可以这样做：

模板：

Link

零件：

handleClick(outside: boolean, internalUrl: string, internalId: string, externalUrl: string): void {

if (outside) {

window.location.href = externalUrl;

// You can also use Location class of Angular

} else {

this.router.navigate([`${internalUrl}/${internalId}`]);

}

}

@isherwood 和永远不会添加到浏览器中的DOM中，它们会在浏览器看到之前由Angular处理。 我不明白您的评论意思。 您为什么认为列表项会是一个单独的列表？ 这个问题也没有说关于列表的任何事情。

示例代码不起作用，应该放在之外

@Zealitude ops，我的错。 谢谢，我已经解决了。

@ developer033：是的，*ngIf是要走的路...

@ code4life nope，那将使Angular路由器变螺丝

@Toolkit：为什么要拧路由器？

对于有条件的href，请在attr之前添加。在href使用null作为值为我工作之前，像这样：

[attr.href]="!item.subMenu ? item.url : null"

经过大量调查，我针对此问题实施了另一种方法，因为我的...包含内部代码(例如，可单击的div)。例如，我不想使用ngIf，因为这会迫使我复制div的内部代码。所以这是我的解决方案：

组件HTML

组件JS

Component({

selector: 'app-home-section',

templateUrl: './home-section.component.html',

styleUrls: ['./home-section.component.scss']

})

export class HomeSectionComponent implements OnInit {

@Input() link: string;

constructor(private router: Router) { }

ngOnInit() {

}

isRouterLink() {

if (this.link) {

let firstLinkChar = this.link.charAt(0);

let isSlash = firstLinkChar == '/';

return isSlash;

}

return false;

}

getRouterLink() {

let url = this.isRouterLink() ? window.location.origin + this.link : 'http://' + this.link;

return url;

}

}

这是使它更简单地工作的唯一方法，因为即使我将" www.example.com"直接放在href(带有或不带有[ ])上，它也总是附加基本网址。它不是很漂亮，但是可以正常工作。

您可以通过在指令中注入RouterLinkWithHref来访问routerLink实例。

指示：

@Directive({

selector: '[externalLink]'

})

export class ExternalLinkDirective {

@Input() externalLink: string;

constructor(

// Inject RouterLinkWithHref

@Optional() private link: RouterLinkWithHref

) {

if (!link) {

return;

}

// Save original onClick method

const onClick = link.onClick;

// Replace method with your own (I know this is not good idea)

link.onClick = (...args: any[]) => {

if (this.externalLink) {

// Process external url

window.location.href = this.externalLink;

return false;

} else {

// Process internal url by calling routerLink original method

return onClick.apply(link, args);

}

}

}

}

用法：

Link

这种方法的缺点-DOM中的href属性未更改