角度2替换当前元素

Question

我想在进行路由而不是附加时替换当前元素。 例如我的代码如下：

<router-outlet>
    <div class="=row" style="height:30%"></div>
    <div class="=row">
        <a routerLink="search" routerLinkActive="active" class="btn btn-success btn-sm" style="width:90%;height:20%;margin-left:5%">
            <span class="glyphicon glyphicon-search"></span> Search1
        </a>
    </div>
    <div class="=row" style="height:30%"></div>
    <div class="=row">
        <button type="button" class="btn btn-success btn-sm" style="width:90%;height:20%;margin-left:5%">
            <span class="glyphicon glyphicon-plus"></span> Search2
        </button>
    </div>
</router-outlet>

但是，最终结果如下图所示：

搜索文本来自searchCOmponent路由。 我想要的是当我单击search1，search 1和search 2时消失了，取而代之的是从searchComponent加载的“测试搜索”文本。 这就是为什么我将“ route-outlet”标签作为父标签。 我希望它能取代整个身体。 有人可以帮忙吗？ 谢谢。

Answer 1

这不是路由器插座的正确用法。 它不应包含任何内容。 而是，路由器会自动填充路由器插座，从而为您提供所需的结果。

有关更多信息，请参阅文档： https : //angular.io/docs/ts/latest/guide/router.html#!#sts= src%2Fapp%2Fapp-routing.module.ts%20( appRoutes）