Lou*_*cký 2 html router angularjs angular2-routing angular
我正在尝试从组件生成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(她的代码正在运行),我花了很多时间来解决这个问题 - 如何在组件内部路由,现在我不知道,我做错了什么.
谢谢你们
不要添加providers: [ROUTER_PROVIDERS],多次,只能添加bootstrap()到根组件中,而不能添加到任何其他组件上.
ROUTER_PROVIDERS多次添加会中断路由.
新RC.3路由器需要ROUTER_PROVIDERS在bootstrap().不支持将其添加到根组件.