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

我只是有一个一般性的问题。我知道如何在页面之间进行路由，但是每次我转到新页面时，

app.component.html

总是显示在页面顶部。我想知道如何停止在几个页面上显示

app.component.html

。我正在创建一种餐厅网页作为一个项目，我想在大多数页面上显示导航栏，但有些页面不需要它。 我目前正在使用

app.routing.ts

导入组件和

const appRoutes:Routes=[]

设置页面路径。

---

如果可能的话，我想要一个typescript答案，但我可以尝试理解javascript，我想你可以使用routerLink和router outlet来创建导航栏

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

---

索引组件服务路径/位置/索引。

让我们考虑两个组件Head和Login，它有两个不同的布局，在这种情况下，使用命令创建两个组件。

ng g c layouts/home layout-s-t

和

ng g c layouts/login layout-s-t

创建两个组件（-t内联模板-s内联样式）。在app.component.html中完成此操作后仅保留路由器出口。然后在模板部分的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() {
  }
}

---

我希望它能帮助别人。

这取决于你是否喜欢它。我的路由器插座在app.component.html中。这有什么不同吗？谢谢你，阿迪，但这只是正常路由的方式。我实现了相同的代码，但是当我进入一个新页面时，我在app.component.ts@component（{selector:'mw-app'，templateUrl:'app/app.component.html'）中的任何内容都会显示在每个页面上。我想看看是否可以将app.component.ts从某些页面中删除。谢谢你！可能您可以参考上面的链接，观察导航事件并禁用不需要的div。这可能是解决您的问题的一种方法。

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 { }