Question

几天前我才开始学习Angular2。我一步一步地跟踪文档和一些youtube教程。

目前我正面临配置路线的问题。我正在使用visual studio代码进行开发。下面是文件内容。

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { FormsModule }   from '@angular/forms';
import { HeroFormComponent } from './heroComponent/hero-form.component';

import {Routes, RouterModule} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
import {ContactusComponent} from './contactUs/contactus.component';
import {AboutusComponent} from './AboutUs/aboutus.component';

export const router:Routes [
    { path: '', redirectTo: '/', pathMatch: 'full'},
    { path:'contact', component:'ContactusComponent'},
    { path:'about', component:'AboutusComponent'}  
];


@NgModule({
  imports:      [ BrowserModule , FormsModule,RouterModule.forRoot(router)],
  declarations: [ AppComponent , HeroFormComponent, ContactusComponent,AboutusComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

在上面的文件中，visual studio代码在[，：etc上显示红色，错误为"[ts] is expected"

的index.html

<html>
  <head>
    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
      href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <base href="/">
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

以下是我的其他一些问题

（1）我看到一些Youtube和其他教程包括<script src="route.dev.js">，但为什么角度文档没有包含它。而且在我的文件夹结构中，node_modules没有文件夹名称angular2，它是@ angular.Like这里有很多其他库，比如RxJx，它们已经包含在教程中，但角度文档没有。我因此而感到困惑。是因为angular2的发布版本不同。

（2）何时为routerLink包含方括号（数组），因为在文档示例中它们没有包含它。

如果您需要tsconfig.json或systemjs.config.js等其他文件内容，请与我们联系。

主要问题是我的应用程序本身没有在控制台上加载抛出错误“redirectTo未定义index.js 20”。

我忘了包含任何文件吗？

任何帮助表示赞赏!!!

谢谢！

Answer 1

如果我是你，我应该在你的路线定义中放置=并删除组件值周围的引号：

export const router:Routes = [  //<-- here
    { path: '', redirectTo: '/', pathMatch: 'full'},
    { path:'contact', component: ContactusComponent},
    { path:'about', component: AboutusComponent}  
];

但我猜你有那个。另一个问题是您从''重定向到'/'。那有什么意思？你想在那里做什么？更好的方法是让路径''使用HomeComponent之类的组件，并将全局重定向到''：

export const router:Routes = [ 
    { path: '', component: HomeComponent},
    { path:'contact', component: ContactusComponent},
    { path:'about', component: AboutusComponent},
    {path: '**', redirectTo: '', pathMatch: 'full'}
];

其他

1）因为angular2在早期的alpha状态下被设为'public'，并且因为从alpha到最终版本有很多重大变化，你在网上找到的很多教程和视频都已经过时了。最好的方法是查看发布日期或查看angular.io网站。根据经验，可以看看他们是否在他们的示例中使用NgModule。如果是这样的话，你偶然发现了一个相对较新的教程

2）从不（不再）。如上所述，这是旧方法。现在所有内容都已移至模块，您只需导入模块中的RouterModule即可使用组件中的所有路由器功能

redirectTo未定义index.js 20：angular2路由

1 个答案: