Question

我看到了类似的问题，但仍然不知道我的代码有什么问题：

login.component.ts：

    import {Component} from 'angular2/core';
import{RouteConfig, ROUTER_DIRECTIVES, Router} from 'angular2/router';
import {ForgetComponent} from './forget.component';

@RouteConfig([
  {path:'/forget/...', name:'Forget-page', component:ForgetComponent},
  {path:'/*other', name:'other', redirectTo:['Login-page']}
])

@Component({
  selector: 'my-login',
  templateUrl: '../templates/login.component.html',
  directives:[ROUTER_DIRECTIVES]
})
export class LoginComponent {
  constructor(private _router: Router) {
  }

  Login(){

  }

  onClick($event){
      this._router.navigate(['Forget-page']);
  }

}

forget.component.ts：

import {Component} from 'angular2/core';
import {LoginComponent} from './login.component';
import{RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';


@RouteConfig([
  {path:'/login/...', name:'Login-page', component: LoginComponent},
  {path:'/*other', name:'other', redirectTo:['Login-page']}
])

@Component({
  selector: 'my-forget',
  templateUrl: '../templates/forget.component.html',
  directives: [ROUTER_DIRECTIVES]
})
export class ForgetComponent {

}

和index.html：

<!doctype>
<html lang="en" dir="rtl" lang="fa">
<head>
    <base href="/">
    <title>Angular 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>


    <link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-login>Loading...</my-login>

<router-outlet></router-outlet>

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/boot')
            .then(null, console.error.bind(console));
</script>
</body>
</html>

我认为所有的进口都是正确的，请告诉我我做了什么？

例外：路由配置应该只包含一个“组件”，“加载器”或“redirectTo”

0 个答案: