组件内的 routerLink 不会生成内容答案

【问题标题】：routerLink inside Component does NOT generate content组件内的 routerLink 不会生成内容
【发布时间】：2016-08-02 22:13:13
【问题描述】：

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

我有主 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 INSIDE COMPONENT 现在我不知道我是什么做错了。

谢谢大家

【问题讨论】：

将 ROUTER_PROVIDERS 添加到引导程序以使其在应用程序范围内可用，但请注意不要在任何组件中再次添加它。 bootstrap(AppComponent,[ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]);（如果你使用 hashlocation）

标签： html angularjs angular router angular2-routing

【解决方案1】：

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

多次添加ROUTER_PROVIDERS 会中断路由。

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

【讨论】：