Question

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

Answer 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提供了路径/位置/索引。

Answer 2

让我们考虑两个组件home和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() {
  }
}

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

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

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

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

2 个答案: