Question

firstpage_server_side_load.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Welcome to myapp</title>
<base href="/temp/angular/" />
 <script src="/temp/angular/node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="/temp/angular/node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="/temp/angular/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
    <script src="/temp/angular/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/temp/angular/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/temp/angular/node_modules/rxjs/bundles/Rx.js"></script>
    <script src="/temp/angular/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="/temp/angular/node_modules/angular2/bundles/http.dev.js"></script>
    <script src="/temp/angular/node_modules/angular2/bundles/router.dev.js"></script>

</head>
<body>
<nav class="nav set-navigation-tab-nav navigation">
    <ul class="set-navigation-tab-nav">
       <li class="set-navigation-tab-container">
          <a [routerLink]="['home/home']">Home</a>
        </li>
       <li class="set-navigation-tab-container">
                <a [routerLink]="['user/register']">register</a>
        </li>
    </ul>
</nav>

<script>

      System.config({
          baseURL: '/temp/angular/',
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        },

      });
      System.import('app/main')
            .then(null, console.error.bind(console));
      document.write('<base href="' + document.location + '" />');
    </script>
</body>
</html>

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {Utils} from './util/Utils';
import 'rxjs/Rx';
import { HTTP_PROVIDERS }    from 'angular2/http';
import { ROUTER_PROVIDERS }    from 'angular2/router';
import {myappComponent} from './myapp.component';
bootstrap(myappComponent,[HTTP_PROVIDERS,Utils,ROUTER_PROVIDERS]);

myapp.component.ts

import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Home} from './home/component.home';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {RegisterPageComponent} from './register-page/component.register.page';

@Component({
   selector: 'my-app',
    templateUrl: './app/template/common/my.body.html',
 directives:[ROUTER_DIRECTIVES]
})
@RouteConfig([
    {
        path:"/home/home",component:Home ,name:'Home',useAsDefault:true
    },
     {
        path:"user/register",component:RegisterPageComponent ,name:'User'
     }, 
])
export class myappComponent{ }

Home.Component.ts

import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
  selector: 'home',
 templateUrl:'./app/template/home/home.html',
 host:{
'(submit)':'onSubmit()'},
 directives:[ROUTER_DIRECTIVES],
})
export class Home{}

RegisterPageComponent.Component.ts

import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
  selector: 'register',
 templateUrl:'./app/template/user/register.html',
 directives:[ROUTER_DIRECTIVES],
})

export class RegisterPageComponent{}

my.body.html

<my-app>
    <router-outlet></router-outlet>
    <home>
    </home>
    <register>
    </register>
</my-app>

解释我正在使用XAMPP服务器，它在网址上加载 firstpage_server_side_load.html 页面： http://localhost/home/home ，一旦页面加载正确的打字稿在html的脚本标签中执行。此配置加载了所有必需的文件。

main.ts 为我的应用程序执行配置网页。所有步骤都运行正常，但一旦加载完所有内容，页面的网址就会更改为 http://localhost/temp/angular/home/home 。

问题：现在，如果我尝试点击注册链接或主页链接，则两者都无效。即使我在控制台中也找不到任何关于这些链接的内容，如任何错误或消息。请告诉我如何使它工作。感谢

angular2 routerLink不起作用

0 个答案: