在 angular 2 中,我无法在不重新加载的情况下在子组件之间进行路由
In angular 2 I cant route between child components without reloading
我们有三个组成部分。 AppComponent 包含两个子组件,即 LoginComponent 和 LandingPageComponent。 @Rougeconfig 定义在 AppComponent 中。但不幸的是,我无法从登录路由到登陆页面。
AppComponent
import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {LoginComponent} from '../app-components/login/login.component';
import {LandingPageComponent} from '../app-components/landing-page/landing-page.component';
@Component({
selector: 'My-app',
templateUrl: './app/app-components/app.html',
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{
path: '/login',
name: 'Login',
component: LoginComponent,
useAsDefault: true
},
{
path: '/landing-page',
name: 'Landing-page',
component: LandingPageComponent,
}
])
export class AppComponent { }
登录组件
import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router} from 'angular2/router';
import {NgForm} from 'angular2/common';
import {LandingPageComponent} from '../landing-page/landing-page.component'
@Component({
selector: 'login',
template: '<a [routerLink]="['Landing-page']">Landing-page</a>',
styleUrls:['./app/app-components/login/login.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class LoginComponent {
//DECLARATIONS
login={username:"",password:""} ;
active = true;
submitted = false;
router: Router;
logineduser=logindec;
//constructor(private _router:Router) {}
constructor(_router: Router){
this.router = _router;
}
onauth() {
this.submitted = true;
if(this.logineduser.username==this.login.username&&this.logineduser.password==this.login.password){
this.router.navigateByUrl('/landing-page');
location.reload();
}
}
}
var logindec={
username:"sampleuser",
password:"a"
} ;
LandingPageComponet
import {Component} from 'angular2/core';
@Component({
selector: 'login',
template:'<h1>Landing Page</h1>'
})
export class LandingPageComponent {}
移除
providers: [ROUTER_PROVIDERS]
来自除您的 AppComponent
以外的任何地方
我们有三个组成部分。 AppComponent 包含两个子组件,即 LoginComponent 和 LandingPageComponent。 @Rougeconfig 定义在 AppComponent 中。但不幸的是,我无法从登录路由到登陆页面。
AppComponent
import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {LoginComponent} from '../app-components/login/login.component';
import {LandingPageComponent} from '../app-components/landing-page/landing-page.component';
@Component({
selector: 'My-app',
templateUrl: './app/app-components/app.html',
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{
path: '/login',
name: 'Login',
component: LoginComponent,
useAsDefault: true
},
{
path: '/landing-page',
name: 'Landing-page',
component: LandingPageComponent,
}
])
export class AppComponent { }
登录组件
import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router} from 'angular2/router';
import {NgForm} from 'angular2/common';
import {LandingPageComponent} from '../landing-page/landing-page.component'
@Component({
selector: 'login',
template: '<a [routerLink]="['Landing-page']">Landing-page</a>',
styleUrls:['./app/app-components/login/login.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class LoginComponent {
//DECLARATIONS
login={username:"",password:""} ;
active = true;
submitted = false;
router: Router;
logineduser=logindec;
//constructor(private _router:Router) {}
constructor(_router: Router){
this.router = _router;
}
onauth() {
this.submitted = true;
if(this.logineduser.username==this.login.username&&this.logineduser.password==this.login.password){
this.router.navigateByUrl('/landing-page');
location.reload();
}
}
}
var logindec={
username:"sampleuser",
password:"a"
} ;
LandingPageComponet
import {Component} from 'angular2/core';
@Component({
selector: 'login',
template:'<h1>Landing Page</h1>'
})
export class LandingPageComponent {}
移除
providers: [ROUTER_PROVIDERS]
来自除您的 AppComponent