组件内的routerLink不生成内容

时间：2016-04-12 10:42:24

标签： html angularjs angular router angular2-routing

我正在花费大量时间从组件生成html内容，但此组件是从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（她的代码正在运行），我花了很多时间来解决这个问题 - 如何在内部组件，现在我不知道，我是什么做错了。

谢谢大家

1 个答案:

答案 0 :(得分：6)

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

多次添加ROUTER_PROVIDERS会中断路由。

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

相关问题
最新问题