组件内的 routerLink 不生成内容

Question

我花了很多时间从 component 生成 html 内容，但是这个 component 是从 AppCompoment 生成的。所以我想用 routerLink 从组件生成内容。我将在下面展示示例。了解我从 DeborahK 的 pluralsight.com 教程中获得的这个解决方案如何，我的源代码与这个 https://github.com/DeborahK/Angular2-GettingStarted/blob/master/APM - Final 相同。好的，让我们解释一下我的代码。

我有主要的index.html

<html>
<head>
    <base href="/">
    <title></title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <!--<script src="node_modules/es6-shim/es6-shim.js"></script>-->
    <script src="node_modules/systemjs/dist/system-polyfills.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.dev.js"></script>

    <!-- if NOT included, does not work in IE-->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <!--Http module-->
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

    <!-- Routing -->
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    <link href="app/css/jquery-ui.css" rel="stylesheet">
    <link href="app/css/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/font-awesome.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet">
    <link href="app/css/jquery-ui-timepicker-addon.css" rel="stylesheet">

    <script src="app/js/jquery.min.js"></script>
    <script src="app/js/jquery-ui.min.js"></script>
    <script src="app/js/jquery-ui-timepicker-addon.js"></script>
    <script src="app/js/jquery-ui-sliderAccess.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="app/js/bootstrap.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/ts/main.component').then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->

<body>
    <zds>Loading...</zds>
</body>

</html>

这个index.html加载我的main.component，main.component的内容是

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent)
    .then(success => console.log("Bootstrap loaded successfully..."))
    .catch(error => console.log(error));

好的，此代码加载我的 app.component.ts

import { Component, OnInit } from "angular2/core";
import { HTTP_PROVIDERS } from "angular2/http";
import 'rxjs/Rx';   // Load all features
import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import {NavbarComponent} from "./navbar.component";
import {WelcomeComponent} from "./welcome.component";
import {TicketComponent} from "./ticket.component";
import {PaymentComponent} from "./payment.component";
import {ReceiptComponent} from "./receipt.component";
import {TestComponent} from "./test";

@Component({
    selector: 'zds',
    templateUrl: 'app/html/app.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
    { path: '/ticket', name: 'Ticket', component: TicketComponent },
    { path: '/payment', name: 'Payment', component: PaymentComponent },
    { path: '/receipt', name: 'Receipt', component: ReceiptComponent },
    { path: '/test', name: 'Test', component: TestComponent }
])

export class AppComponent {
}

好的，我的app.html是

<div>
    <div class="content">
        <div class="process-bar" *ngIf="submenuEnabled">
            <div class="steps" style="margin-top:10px;margin-bottom:20px;">
                <a [routerLink]="['Ticket']" class="active">{{ticket}}</a>
                <a [routerLink]="['Payment']">{{payment}}</a>
                <a [routerLink]="['Receipt']">{{receipt}}</a>
            </div>
        </div>

        <div id="process-container">
           <router-outlet></router-outlet>
        </div>
    </div>
</div>

此后显示欢迎页面，没有问题。来自 submenu 的路由有效，routerLink 组件内部有问题。欢迎页有按钮，见下面welcome.html

<div class="welcome">
    <h3>{{welcomeTitle}}</h3>
    <div>{{welcomeDescription}}</div>
    <div class="bottom-text">{{welcomeBuyText}}</div>
</div>

<div class="buttons-footer">
    <div>
        <a [routerLink]="['Test']" class="btn btn-main btn-large"><i class="glyphicon glyphicon-ok"></i>{{welcomeBuyTicket}}</a>
    </div>
</div>

而welcome.component.ts为welcome.html页面，很简单：

import {Component, OnInit} from "angular2/core";
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from "angular2/router";
import { Router } from 'angular2/router';

@Component({
    //selector: 'welcome',
    templateUrl: 'app/html/welcome.html',
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES]
})

export class WelcomeComponent implements OnInit {
    welcomeBuyTicket = "Buy ticket";
    //other string contants from html

    constructor() {  }

    ngOnInit() {

    }

}

例如，我希望 welcome.html 上的按钮将我引导至测试组件（html 页面）。所以我有 [routerLink]="['Test']", test.component.ts 已经存在。带有模板的组件是

import { Component, OnInit }  from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';

@Component({
    template: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet metus tortor. Suspendisse tempus sed ipsum sed auctor. Cras suscipit metus tortor, ac accumsan sem pharetra a. Proin ac eleifend elit, nec efficitur odio. Vivamus mattis laoreet turpis at vehicula. Donec commodo ipsum velit, sed maximus justo accumsan vitae. Phasellus rhoncus risus quam, vel egestas sem lobortis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec laoreet est est, at pharetra dolor fringilla dictum. Nam dignissim velit nisl, quis placerat ex lacinia aliquam. Ut fermentum a est ullamcorper rutrum. Cras vitae nulla laoreet, interdum lorem a, blandit mauris.</p>`,
    directives: [ROUTER_DIRECTIVES]
})

export class TestComponent implements OnInit {

    constructor() {
    }

    ngOnInit(): void {
    }
}

所以现在，当我点击 welcome.html 上的按钮时，URL 被更改为 localhost:3000/test，但页面上的内容仍然是 welcome.html , 没有任何 lorem ipsum 页面，只有 URL 可以，但内容不会重新生成。控制台未显示任何错误。我的代码与来自 Github 的 DeborahK 非常相似（她的代码可以工作），我在这个问题上花了很多时间 - HOW TO ROUTE INSIDE COMPONENT 现在我还没有知道我做错了什么。

谢谢大家

Answer 1

不要多次添加 providers: [ROUTER_PROVIDERS],，并且只能在 bootstrap() 或根组件中添加，但 不要在任何其他组件中添加 。

多次添加 ROUTER_PROVIDERS 会中断路由。

新的 RC.3 路由器需要 ROUTER_PROVIDERS bootstrap()。不支持将其添加到根组件。

组件内的 routerLink 不生成内容

routerLink inside Component does NOT generate content

html

router

angularjs

angular2-routing

angular