Angular 2 - 如何路由到新页面而不在新页面中显示 app.component.html 中的 html答案

【问题标题】：Angular 2 - How to route to a new page without showing the html in app.component.html in the new pageAngular 2 - 如何路由到新页面而不在新页面中显示 app.component.html 中的 html
【发布时间】：2017-10-23 14:35:40
【问题描述】：

我只是有一个一般性的问题。我知道如何在页面之间进行路由，但是每次我转到新页面时，app.component.html 总是显示在页面顶部。我想知道如何停止在几页上显示app.component.html。我正在创建一种餐厅网页作为项目，我希望导航栏显示在大多数页面上，但有些页面不需要它。我目前正在使用app.routing.ts 导入组件和 const appRoutes: Routes = [] 设置页面的路径。如果可能的话，我想要一个打字稿答案，但我可以尝试理解 javascript

【问题讨论】：

这取决于你的是否加入
我的路由器插座在我的 app.component.html 中。这有什么不同吗？

标签： html angular routing routes angular2-routing

【解决方案1】：

我认为你可以使用 routerLink 和 router-outlet 来做导航栏。

<div>
    <a [routerLink]='place/index'>index</a>
    <a [routerLink]='place/info'>info</a>
</div>
<router-outlet></router-outlet>

你可以设置你的模块的路由。

RouterModule.forRoot([
    {path:'index',component: IndexComponent}
])

IndexComponent 服务于路径 /place/index。

【讨论】：

感谢neuropaddy，但这只是正常路由的方法。我实现了相同的代码，但是当我进入一个新页面时，无论我在 app.component.ts @Component({ selector: 'mw-app', templateUrl: 'app/app.component.html' } ) 显示在每一页上。我想看看我是否可以删除 app.component.ts 出现在某些页面中。不过谢谢！
也许你可以参考上面的链接，观察导航事件并禁用你不想要的div。这可能是解决您问题的一种方法。

【解决方案2】：

让我们考虑两个组件 home 和 login 有两个不同的布局，在这种情况下，使用命令创建两个组件 ng g c layouts/home-layout -s -t 和 ng g c layouts/login-layout -s -t 创建两个组件（-t 内联模板 -s 内联样式）。在 app.component.html 中完成此操作后，只保留 router-outlet。然后在 home-layout.component.ts 的模板部分设计你的布局

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home-layout',
  template: `
  <app-headding></app-headding>
  <div class="col-md-4">
    <app-menu></app-menu>
  </div>
  <div class="col-md-8">
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
  `,
  styles: []
})
export class HomeLayoutComponent implements OnInit {
constructor() { }
ngOnInit() {
  }
}

类似地，创建没有菜单选择器的登录布局

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login-layout',
  template: `
  <app-headding></app-headding>
  <div class="col-md-12">
      <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
  `,
  styles: []
})
export class LoginLayoutComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

现在通过为这些模块创建子组件来设置路由模块

import { LoginLayoutComponent } from './layouts/login-layout/login-layout.component';
import { HomeLayoutComponent } from './layouts/home-layout/home-layout.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
  {path: '', redirectTo: 'create-repo', pathMatch: 'full'},
  {path: '', component: HomeLayoutComponent,
    children: [
      {path: 'home', component: HomeComponent }
    ]
  },
  {path: '', component: LoginLayoutComponent,
    children: [
        {path: 'login', component: LoginComponent }
    ]
  },
  {path: '**', component: CreateRepoComponent}
];

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

我希望它对某人有所帮助。

【讨论】：