Question

我正在浏览app.component.My的内容时导航到另一个组件显示其他组件而不是。但它也显示了app.component内容。我需要隐藏那些.Pls帮助我做该

Answer 1

你有两个主要的可能性：像这样使用路由器插座（或英雄之旅）http://embed.plnkr.co/vTmlwo2LP2sQ3NCCp4VH/

在这种情况下，您需要配置所有路线（路径，名称......）：

<a [routerLink]="['Page1']">Page 1</a>
<a [routerLink]="['Page2']">Page 2</a>
<router-outlet></router-outlet>

已编辑：另一种可能性是，在您的 app html 代码中隐藏您的组件

// try both solution, ngIf has problems sometimes to regenerate the DOM to display
<app-pageContact [class.hidden]="!(page === 'Contact')"></app-contact>
<app-pageContact *ngIf="page === 'Contact'"></app-contact>

// somewhere in your code just change this value depending on the button clicked
<button (click)="changePage('Contact')">Contact us</button>

app.component.ts中的

创建更改页面变量值的changePage方法：

changePage(pageName: string) {
   this.page = pagename;
}

/！\在这种情况下，您拥有的代码越多，您的应用程序和代码就越难理解，所以我仍然建议路由。< / p>

在angular2中路由时隐藏当前组件

1 个答案: