Angular2：完全替换组件元素

Question

我四处寻找了一段时间，似乎找不到正确的答案...这应该是非常微不足道的事情...并且到处都有记录...只是似乎找不到它...

所以，我有一个非常非常简单的 component/directive 叫做 navItem

我是这样称呼它的

<ul>
    <nav-item route="/aboutus">About us</nav-item>
    <nav-item route="/contactUs">Contact us</nav-item>
</ul>

这就是里面的内容 (nav-item.html):

<li><a [routerLink]="route"><ng-content></ng-content></a></li>

基本上我只有这个：

import { Component, Input } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'nav-item',
    template: require('./nav-item.html'),
    directives: [ROUTER_DIRECTIVES]
})
export class NavItem {
    @Input() route = '/';


    constructor(){}
}

我得到的是

<ul>
    <nav-item _ngcontent-xng-6="" route="/aboutus" ng-reflect-route="/aboutus"><li><a ng-reflect-router-link="/aboutus" ng-reflect-href="/aboutus" href="/aboutus">About us</a></li></nav-item>
    <nav-item _ngcontent-xng-6="" route="/contactus" ng-reflect-route="/contactus"><li><a ng-reflect-router-link="/aboutus" ng-reflect-href="/contactus" href="/contactus">Contact us</a></li></nav-item>
</ul>

我当然不想要。

我想要的是将 <nav-item> </nav-item> 完全替换为 <li><a></a></li>

在 AngularJs 中非常简单。

Answer 1

这不受支持，我很确定将来不会。 replace: true 在 Angular1 中也被弃用了很长一段时间。

你可以做的是使用像

这样的属性选择器

@Component({
    moduleId: module.id,
    selector: '[nav-item]',
    template: require('./nav-item.html'),
    directives: [ROUTER_DIRECTIVES]
})
export class NavItem {
    @Input() route = '/';


    constructor(){}
}

<a [routerLink]="route"><ng-content></ng-content></a>

并像

一样使用它

<ul>
    <li nav-item route="/aboutus">About us</li>
    <li nav-item route="/contactUs">Contact us</li>
</ul>

Answer 2

我想你想要的是一个属性指令，而不是上面建议的组件。

Angular2：完全替换组件元素

Angular2: replace component element entirely

javascript

components

angular