RouteConfig 在我的 angular 2 项目中似乎不起作用
RouteConfig does not seem to work in my angular 2 project
我正在尝试在我的 Angular2 应用程序中使用 RouteConfig。现在,我似乎无法找出我做错了什么。
我的 App 组件正在使用 router-outlet 东西,但它不起作用。
我创建了一个 main.ts 文件,其中 bootstrap 我的应用程序:
Main.ts
import {provide, enableProdMode, Injectable, Component} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
const ENV_PROVIDERS = [];
if ('production' === process.env.ENV) {
enableProdMode();
} else {
ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS);
}
import {App} from './app/app';
/*
* Bootstrap our Angular app with a top level component `App` and inject
* our Services and Providers into Angular's dependency injection
*/
document.addEventListener('DOMContentLoaded', function main() {
bootstrap(App, [ENV_PROVIDERS, HTTP_PROVIDERS, ROUTER_PROVIDERS, RouteConfig, provide(LocationStrategy, { useClass: HashLocationStrategy }) ])
.catch(err => console.error(err));
});
应用组件
// Bootstrapping imports
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { Injectable, provide, Component, ViewEncapsulation } from 'angular2/core';
// Import components
import {AmendmentComponent} from '../Components/amendmentComponent';
@Component({
selector: 'app',
template: `
<div>
<div class="header wrapper">
<header class="row">
<div class="column small-12">
<a href="/">
<img src="/assets/img/logo.svg" title="" />
</a>
<a class="navigation-toggle icon-menu hide-for-large-up" (click)="toggleMenuState()" href="javascript:void(0);"></a>
</div>
</header>
</div>
<router-outlet></router-outlet>
<div class="footer wrapper">
<footer class="row">
<div class="column small-12">
<div class="container">
<div class="icon icon-ship hide-for-medium-down"></div>
</div>
</div>
</footer>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
directives: [ ROUTER_DIRECTIVES ],
styles: [`
app {
display: block;
}
`]
})
@RouteConfig([
{ path: '/', redirectTo: ["Amendment"] },
{ path: '/amendment/...', name: 'Amendment', component: AmendmentComponent, useAsDefault: true },
])
export class App {
angularclassLogo = 'assets/img/favicon.ico';
name = 'AmendmentFront';
url = '';
constructor() {
}
}
当用户输入地址:localhost:3000 或 localhost:3000/amendment 时,它应该加载 AmendmentComponent 组件,但没有任何反应,我可以看到页眉和页脚,但在中间我有路由器插座的地方。
我做错了什么?
在与用户讨论后,我遇到了这些错误:
Error during instantiation of Router! (RouterOutlet -> Router).
Child routes are not allowed for "/amendment". Use "..." on the parent's route path.
Angular 对无效 HTML 的最后一个 alpha 或第一个 beta 版本之一变得更加严格。 <img ... />
在 HTML5 中无效,即使浏览器试图按照开发人员的预期方式对其进行解释。它可能会导致意想不到的结果,因此 Angular 不再尝试过于宽容。
同时将 useAsDefault: true
添加到一条路线。
我正在尝试在我的 Angular2 应用程序中使用 RouteConfig。现在,我似乎无法找出我做错了什么。
我的 App 组件正在使用 router-outlet 东西,但它不起作用。
我创建了一个 main.ts 文件,其中 bootstrap 我的应用程序:
Main.ts
import {provide, enableProdMode, Injectable, Component} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
const ENV_PROVIDERS = [];
if ('production' === process.env.ENV) {
enableProdMode();
} else {
ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS);
}
import {App} from './app/app';
/*
* Bootstrap our Angular app with a top level component `App` and inject
* our Services and Providers into Angular's dependency injection
*/
document.addEventListener('DOMContentLoaded', function main() {
bootstrap(App, [ENV_PROVIDERS, HTTP_PROVIDERS, ROUTER_PROVIDERS, RouteConfig, provide(LocationStrategy, { useClass: HashLocationStrategy }) ])
.catch(err => console.error(err));
});
应用组件
// Bootstrapping imports
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { Injectable, provide, Component, ViewEncapsulation } from 'angular2/core';
// Import components
import {AmendmentComponent} from '../Components/amendmentComponent';
@Component({
selector: 'app',
template: `
<div>
<div class="header wrapper">
<header class="row">
<div class="column small-12">
<a href="/">
<img src="/assets/img/logo.svg" title="" />
</a>
<a class="navigation-toggle icon-menu hide-for-large-up" (click)="toggleMenuState()" href="javascript:void(0);"></a>
</div>
</header>
</div>
<router-outlet></router-outlet>
<div class="footer wrapper">
<footer class="row">
<div class="column small-12">
<div class="container">
<div class="icon icon-ship hide-for-medium-down"></div>
</div>
</div>
</footer>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
directives: [ ROUTER_DIRECTIVES ],
styles: [`
app {
display: block;
}
`]
})
@RouteConfig([
{ path: '/', redirectTo: ["Amendment"] },
{ path: '/amendment/...', name: 'Amendment', component: AmendmentComponent, useAsDefault: true },
])
export class App {
angularclassLogo = 'assets/img/favicon.ico';
name = 'AmendmentFront';
url = '';
constructor() {
}
}
当用户输入地址:localhost:3000 或 localhost:3000/amendment 时,它应该加载 AmendmentComponent 组件,但没有任何反应,我可以看到页眉和页脚,但在中间我有路由器插座的地方。
我做错了什么?
在与用户讨论后,我遇到了这些错误:
Error during instantiation of Router! (RouterOutlet -> Router). Child routes are not allowed for "/amendment". Use "..." on the parent's route path.
Angular 对无效 HTML 的最后一个 alpha 或第一个 beta 版本之一变得更加严格。 <img ... />
在 HTML5 中无效,即使浏览器试图按照开发人员的预期方式对其进行解释。它可能会导致意想不到的结果,因此 Angular 不再尝试过于宽容。
同时将 useAsDefault: true
添加到一条路线。