Angular 2路由隱藏選擇器導航

Question

在我的應用程序組件html中，我有一個選擇器和路由器插座。當我嘗試通過單擊鏈接進行導航時，選擇器仍然存在。我如何隱藏選擇器？只應顯示路由器插座。

app.component.html

<nav> 
<a [routerLink]="['/heroes']">Click here</a> 
</nav> 

<router-outlet></router-outlet> <-- Display the content here 

<feed></feed> <--- feed component selector 

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import 'rxjs/add/operator/map'; 

@Component({ 
selector: "app", 
templateUrl: "app/app.component.html" 
}) 
export class AppComponent implements OnInit { 

ngOnInit() { 
}} 

app.routing.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HeroComponent } from "./components/hero/hero.component"; 
const routes: Routes = [ 
{ path: 'heroes', component: HeroComponent} 
]; 

@NgModule({ 
imports: [RouterModule.forRoot(routes, { useHash: true })], 
exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

export const routingComponents = [HeroComponent]; 

的index.html

<app>Loading...</app> 

這怎麼辦？

Answer 1

取決於你的目標，你想在路線改變時刪除dom中的所有內容嗎？

如果是，則應將router-outlet放入您的應用程序組件中。

現在它的表現不如預期，角被渲染的HeroComponent視圖內容router-outlet標籤中保留任何「額外」的標籤頁面中的

，如果你想從您的視圖中刪除僅飼料成分，你可以做像這樣：

//take a reference to the current active route 
constructor(private route:ActivatedRoute) { 
    this.activeRoute = route.snapshot.url; 

} 

<feed *ngIf="activeRoute !== '/heroes''"></feed>