AppComponent 上使用嵌套组件时的路由

Question

我是 Angular 2 的新手，遇到路由问题。我刚刚开始探索路由。我将解释结构和到目前为止我所取得的成就，

app.router.ts

import { ModuleWithProviders } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

import { AppComponent } from './app.component';
import { LoginComponent } from "../app/login/login.component"

export const router: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', component: LoginComponent }, 
    { path: 'dashboard', component: AppComponent }
];

export const routes:  ModuleWithProviders = RouterModule.forRoot(router);

app.module.ts

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

import { HttpModule } from '@angular/http';

import {UiSwitchModule} from 'angular2-ui-switch'

import { AppComponent } from './app.component';
import { AllReportsComponent } from "../app/all-reports/all-reports.component"
import { AvailableReportsComponent } from "../app/available-reports/available-reports.component"
import { NextReportsComponent } from "../app/next-reports/next-reports.component"
import { UrlsComponent } from "../app/urls/urls.component"
import { LoginComponent } from "../app/login/login.component"
import { TaskApi } from "../app/api/TaskApi"

import { routes } from "../app/app.router"

@NgModule({
    imports: [ 
        BrowserModule, 
        FormsModule, 
        UiSwitchModule,
        HttpModule,
        routes
    ],
    declarations: [ 
        AppComponent, 
        AllReportsComponent, 
        AvailableReportsComponent, 
        NextReportsComponent,
        UrlsComponent, 
        LoginComponent        
        ],
    bootstrap: [AppComponent]
})

export class AppModule {

}

app.html

   <div>
        <all-reports></all-reports>
       <available-reports></available-reports>
        <next-reports></next-reports>
        <urls></urls>
   </div>

app.component.ts（很简单）

import { Component } from "@angular/core"

@Component({
    templateUrl: '../app/app.html'
})

export class AppComponent {

}

和login.component.ts

import { Component } from '@angular/core';
import { TaskApi } from '../api/TaskApi';
import * as models from '../model/models';

@Component({

    styleUrls: ['/app/css/login.css'],
    templateUrl: '../../app/login/login.html',
    providers: [TaskApi]
})

导出class登录组件{

}

现在可以看到我在 app.html 上使用了多个指令，并且所有相应的组件都工作正常。

我面临的问题是，当我引入路由时，我就能理解在哪里使用 "router-outlet"。我在 Index.html 上使用过它，但它不起作用并且给出了有关 ng-component 的错误。所以为了测试我在 Index.html,

中使用了以下内容

<body>   
    <base href="/"> 
    <ng-component></ng-component>
</body>

执行此操作后，默认情况下会显示我的 AppComponent，默认情况下应显示 LoginComponent。在控制台上，它也给我错误 "Error: Cannot find primary outlet to load 'LoginComponent'"

如果我如上所述在 App.html 上使用 4 个指令，请指导我，那么在这种情况下路由将如何工作。总而言之，我想在 localhost:3009/login 和 localhost:3009 上显示登录页面，我想在 localhost:3009/dashboard 和 [=47= 中显示主页 (app.html) ] 正在使用 4 个指令在其上显示 4 个子组件。

Answer 1

Angular路由

Since Angular is single page application the routing functionality helps to display different view in single page.

如何使用路由器改变视图？

因为 app.component.html 是大多数用户的主视图。我也考虑 app.component.html 作为主视图。

路由器插座

  Router-outer helps to load the change in our angular application.

app.component.html

<router-outlet></router-outlet>

将 AppComponent 默认页面设置为 router-outlet 并在主视图中创建新的 Dashboard.component.html。

router.ts

import { ModuleWithProviders } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

import { AppComponent } from './app.component';

import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from "../app/login/login.component"

export const router: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', redirectTo: '', pathMatch: 'full' }, 
    { path: 'dashboard', component: DashboardComponent }
];

export const routes:  ModuleWithProviders = RouterModule.forRoot(router);

Answer 2

你的代码的问题是没有 'router-outlet'，所以 angular 不明白在哪里显示视图。

'router-outlet' 指令标记路由器显示视图的位置。

在您的代码中，由于在 app.component.ts 中您使用的是 app.html，因此您应该在该 HTML 文件中使用 <router-outlet> </router-outlet>。

您的 app.html 文件应如下所示：

<router-outlet> </router-outlet>

应用程序组件 HTML 文件中不应使用以下内容。它们应该在其相应的组件中使用。

   <all-reports></all-reports>
   <available-reports></available-reports>
   <next-reports></next-reports>
   <urls></urls>

进一步理解请参考Angular2官方文档。他们在这里解释得很好 https://angular.io/docs/ts/latest/guide/router.html

AppComponent 上使用嵌套组件时的路由

Routing when nested components are used on AppComponent

angular2-directives

angular2-routing

Angular路由

如何使用路由器改变视图？

app.component.html

router.ts