从app.component.ts角度路由

你好我有angularjs应用程序和路由模块（AppRoutingModule）一切正常，当我插入<router-outlet></router-outlet>在app.component.html，但如果我想显示一些页面注册用户而不是展示其他人。从app.component.ts角度路由

我的意思是在我app.component.ts

如果（东西）{默认显示示例页面}其他{ 显示示例2页 }

APP-routing.module.ts

import { NgModule } from '@angular/core'; 
// Routing 
import { RouterModule, Routes } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { LoginComponent } from './login/login.component'; 
import { RegistrationComponent } from './registration/registration.component'; 

const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'registration', component: RegistrationComponent} 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(
     appRoutes, 

    ) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class AppRoutingModule {}

app.module.ts

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

import { AppComponent } from './app.component'; 
import { AlertModule } from 'ngx-bootstrap'; 

// Import the AF2 Module 
import { AngularFireModule } from 'angularfire2'; 
import { AngularFireAuthModule } from 'angularfire2/auth'; 
import { AngularFireDatabaseModule } from 'angularfire2/database'; 
import { environment } from '../environments/environment'; 

import { AppRoutingModule } from './app-routing.module'; 
import { HomeComponent } from './home/home.component'; 
import { LoginComponent } from './login/login.component'; 
import { RegistrationComponent } from './registration/registration.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    RegistrationComponent, 
    HomeComponent, 
    LoginComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AlertModule.forRoot(), 
    AngularFireModule.initializeApp(environment.firebase), 
    AngularFireAuthModule, 
    AngularFireDatabaseModule, 
    AppRoutingModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

app.component.ts

import { Component } from '@angular/core'; 
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    items: FirebaseListObservable<any[]>; 
    constructor(db: AngularFireDatabase) { 
    this.items = db.list('/sms'); 
    } 
}

app.component.html

<router-outlet></router-outlet>

来源

2017-08-30 Gocha

看看这篇文章：https://angular.io/guide/router#milestone-5-route-guards –

我该怎么办只是。 –

是的，我知道这一点，但这里不是代码示例，我需要 – Gocha

使用this.router.navigate（['/ path']）;

这里路径指的是在app.module.ts进入组件的路径。

对于更多参考检查这个官方角文档链接 https://angular.io/guide/router

来源

2017-08-30 13:14:03

为 '页' 之间导航，您可以添加在家里组件类以下内容：

import { Router } from '@angular/router'; 
.... 

constructor(private router: Router){} 
...

然后从某处拨打电话（如（点击））：

if(condition){ 
    this.router.navigate(['/page1']); 
} 
else{ 
    this.router.navigate(['/page2']); 
}

，这增加路线：然后

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

在构造函数：

..... 
    { path: 'page1', component: Page2Component }, 
    { path: 'page2', component: Page1Component} 
....

无论是在家里组件HTML补充一点：

<a class="home-app-link" routerLink="/page1"> 
    <h3>Page1</h3> 
    </a> 

    <a class="home-app-link" routerLink="/page2"> 
    <h3>Page2</h3> 
    </a>

来源

2017-08-30 10:02:28 Vega

在app.component.ts：

if (3 < 2) { 
    this.router.navigate(['/registration']); 
} else { 
    this.router.navigate(['/login']); 
}

来源

2017-08-30 11:01:46 Gocha

从app.component.ts角度路由

回答

相关问题