导航到角度 4 中的单独页面/组件

Question

我创建了一个名为 login-page 的新模块。 我想从 app.component.html 导航到该模块

然后通过app.component.html的按钮给出链接如下：

<a routerLink="/login-page">
  <button class="ms-Button" id="btn-1">
    <span class="ms-Button-label" id="Sign_up_btn">SignUp</span>
  </button>
</a>

app.modules.ts文件如下所示：

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

import { AppComponent } from './app.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { LoginPageComponent } from './login-page/login-page.component';
import { RouterModule, Routes } from '@angular/router';
import { SignupFormComponent } from './signup-form/signup- form.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginPageComponent,
    SignupFormComponent
  ],
  imports: [

    BrowserModule,
    FlexLayoutModule,
    RouterModule.forRoot([
      { path: 'login-page', component: LoginPageComponent },
      { path: 'signup-form', component: SignupFormComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

它导航正常，但其内容（ login-page.component.html ）显示在同一页面（ app.component.html ）中。 我希望它显示单独的页面。 我怎样才能做到这一点？

Answer 1

AppComponent是主要组件，其他组件都在其中呈现。 所以你要做的就是从 Appcomponent 中删除内容，然后将这些内容添加到另一个路由下的组件中。 然后默认调用该路由，并在需要时从那里导航到登录路由。

然后你的代码将如下所示，

应用模块

   .... 
   RouterModule.forRoot([
    { path: '', pathMatch: 'full', redirectTo: 'initial-page' },
    { path: 'initial-page', component: InitialPageComponent }, // move all your appcomponent code to this component
    { path: 'login-page', component: LoginPageComponent },
    { path: 'signup-form', component: SignupFormComponent }
   ])
   ....

初始页面组件.html

<a [routerLink]="['../login-page']">
        <button class="ms-Button" id="btn-1">
             <span class="ms-Button-label" id="Sign_up_btn">SignUp</span>
       </button>
</a>

应用组件 (html)

<router-outlet></router-outlet>

另请阅读DOCS

Answer 2

设置很简单，像这样

1. 将<router-outlet></router-outlet>放在应用程序组件的模板中，该组件用于路由读取器

2. 您的路线

   { path: 'login-page', component: LoginPageComponent }, { path: 'signup-form', component: SignupFormComponent } , { path :'',redirectTo:'login-page',pathMatch:'full'} // defualt route

希望它起作用。