整页导航角4

Question

我刚接触到棱角，并开始掌握路由和组件的窍门。不过，我有一个问题，就是：

• 如何导航到第二个页面(组件)，只显示该内容，而不只是将组件数据加载到<router-outlet></router-outlet>中。

第一页组件

第二页组件

单击该按钮时，希望整个页面只显示第二个组件数据。我基本上想知道我如何能够在角4的整个页面导航。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { ApplyComponent } from './apply/apply.component';
import { RouterModule, Routes } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    ApplyComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
    {
        path: 'apply', component: ApplyComponent
    }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.componenter.html

<div class="container">
<br><br>
<h1 class="header center orange-text">First page</h1>
<div class="row center">

</div>
<div class="row center">

<a
routerLink="/apply"
class="btn waves-effect waves-light"
type="submit" 
name="action">

Second page
</a>

</div>
<br><br>

</div>

<router-outlet></router-outlet>

apply.component (第二页)

<div class="container">
<br><br>
<h1 class="header center orange-text">Second page</h1>
<div class="row center">

</div>
<div class="row center">

<a
routerLink="/"
class="btn waves-effect waves-light"
type="submit" 
name="action">

Back
</a>

</div>
<br><br>

</div>

如果你有任何问题或需要澄清，请毫不犹豫地问！

谢谢你！/E

Answer 1

在角度上，您可以将一个组件嵌套到另一个组件中，从而保留父组件，然后在父组件中加载子组件。组件也可以存在，而无需嵌套到另一个组件中。声明组件标记的位置非常重要。

假设我们有一个站点，其中有一个导航栏，我们希望在所有页面上显示。首先，将一个主组件(名为app.component)插入到index.html中，该组件通常具有选择器名称<app-root></app-root> (也就是说，如果您使用角cli创建您的角度项目)，在应用程序启动时加载app.component。现在，由于我们希望在所有页面上显示navbar，您可以创建一个navbar组件，并将它的选择器标记放置在app.component.html (这是app组件的视图)中，并放置您的<router-outlet></router-outlet>。因为app.component是所有其他组件的父组件，所以navbar将显示在每个其他组件上。现在，如果我们不希望navbar显示在每个组件上，怎么办？然后我们做相反的事情，我们不把<navbar></navbar>放在根部。我们将它放置在我们希望它显示的组件中，然后每个其他子组件也会显示它。现在，放置在app.component中的每个组件都不会显示navbar

因此，简而言之，如果您希望“只显示第二个组件数据”，则将其设置为父组件。希望我回答了你的问题。

Answer 2

您需要一个用于/的路由条目，如

RouterModule.forRoot([
{
    path: '', component: DummyComponent, pathMatch: 'full',
    path: 'apply', component: ApplyComponent
}
])

为此，您需要一些可能在视图中没有任何内容的组件(如DummyComponent)。它只是用来满足路由器。

对于具有空路径( pathMatch: 'full' )且没有子路由的路由，需要使用''。

Answer 3

您的app-root html和父组件将始终显示；您需要的是您自己的组件中的首页组件。

> app-component (always displays) //the parent
>      child components
>             Home
>             About
>             Products
>             ...

然后，路由器可以路由/显示每个组件(使用父节点中的导航条)。