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

【问题标题】：Navigating to separate page/component in angular 4导航到角度 4 中的单独页面/组件
【发布时间】：2018-12-27 09:14:18
【问题描述】：

我创建了一个名为登录页面的新模块。我想从 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)。我希望它显示单独的页面。我怎样才能做到这一点？

【问题讨论】：

标签： angular angular4-router

【解决方案1】：

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

那么你的代码将如下所示，

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>

也请阅读DOCS

【讨论】：

意味着我需要创建单独的 router.ts 文件然后需要调用路由？？
[routerLink]="['../login-page']"
抱歉问这个问题，意味着我需要再创建一个组件（初始页），我需要将我的代码（app.component.html）移到那里。我真的对这种角度路由感到困惑..
是的。这正是你必须做的
也将路由器链接改成这样 - [routerLink]="['../login-page']"

【解决方案2】：

设置很简单

把<router-outlet></router-outlet>放到app的模板里面组件 this 与路由读取器相关的组件

你的路线

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

希望它有效。

【讨论】：

它已经在（app.component.html）中，我已经尝试像你提到的那样给出路径，但它仍然不起作用。