Question

我在角度2中有一个登录组件和主页组件。当我登录并尝试导航到主页面时，登录和主页组件都在同一页面中。

我的app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { Appmainpage }  from './mainpage.component';
import { RouterModule, Routes } from '@angular/router';


const appRoutes: Routes = [

   {path: 'login', component: AppComponent},
   { path: 'mainpage', component: Appmainpage}


 ];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ],
  declarations: [ AppComponent, Appmainpage ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我的app.component.ts

import { Component } from '@angular/core';
import { Login } from './login';
import { Router }  from '@angular/router';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'my-app',
  template: `

  <router-outlet> </router-outlet>

  `,  
})


export class AppComponent  {
  constructor(public _router: Router, private route: ActivatedRoute){} 
  model  = new Login(null, null)
  uname:any;
  pwd:any;
ulogin()
{
  if (this.model.uname == "NP13310" && this.model.pwd == "pandi")
{
console.log("sucess");
 this._router.navigate(['../mainpage'], { relativeTo: this.route});
}

}

 }

我的mainpage.component.ts显示主页

import { Component } from '@angular/core';
import { AppComponent }  from './app.component';
import { RouterModule, Routes } from '@angular/router';
@Component({

templateUrl: 'app/mainp.component.html'  
})
export class Appmainpage  {


 }

Answer 1

AppComponent是您应用的根目录。它显示路由器插座中的所有内容。您应该为登录创建另一个组件。

Angular 2路由显示组件

1 个答案: