Question

我试图在Angular2应用程序中使用RouteConfig。现在，我似乎无法找出我做错了什么。

我的应用组件正在使用 router-outlet ，但它无法正常工作。

我创建了一个main.ts文件来引导我的应用程序：

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 / revision时，它应该加载AmendmentComponent组件，但没有任何反应，我可以看到页眉和页脚，但我没有在路由器中间的任何东西-outlet。

我做错了什么？

在与用户讨论后，我收到了这些错误：

实例化路由器时出错！（RouterOutlet - ＆gt;路由器）。儿童路线不允许进行＆＃34; /修正＆＃34;。使用＆＃34; ...＆＃34;在父母的路线上。

Answer 1

Angular对于无效HTML的最后一个alpha或第一个beta版本之一变得更加严格。 <img ... />在HTML5中无效，即使浏览器试图按照开发人员的意图解释它。它可能导致意想不到的结果，因此Angular不再试图过于原谅。

同时将useAsDefault: true添加到一条路线。

RouteConfig似乎不适用于我的角度2项目

1 个答案: