导航到角4中的独立页/组件

Question

我创建了一个名为登录页面的新模块。我想从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中删除内容，并将这些内容添加到另一个路由下的组件中。然后默认情况下调用该路由，并在需要时从那里导航到登录路由。

那么您的代码如下所示，

AppModule

   .... 
   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 }
   ])
   ....

InitialPageComponent.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>

AppComponent (html)

<router-outlet></router-outlet>

也请阅读文档

Answer 2

这样的设置很简单

1. 将<router-outlet></router-outlet>放入app组件的诱惑中，这是该组件实现路由reander的地方。
2. 你的路线 { path：‘登录-页’，组件: LoginPageComponent }，{ path：‘注册-表单’，组件: SignupFormComponent }，{ path :''，重定向到：‘登录-页’，路径匹配：‘full’} // defualt路由

希望能成功。