Question

在我的app组件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放入您的app-component。

现在它的行为符合预期，angular会在HeroComponent标记内呈现router-outlet的视图内容，在页面中保留任何“额外”标记

如果您只想从视图中删除Feed组件，可以这样做：

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

 }

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

导航时Angular 2路由隐藏选择器

1 个答案: