ナビゲート時に角度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をアプリコンポーネントに配置する必要があります。

は、今では、角度はあなたのビューからのみの供給コンポーネントを削除したい場合は、あなたが行うことができます

ページ内の任意の「余分な」タグを保っrouter-outletタグ内HeroComponentの表示コンテンツをレンダリングされ、期待通りに動作していますように：

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

} 

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