Question

我开始使用角度2和流星，所以我创建了一个简单的应用程序并尝试让子路由器工作。到目前为止一切都很好，我确实有一个像

这样的嵌套状态

/products/milk

main.ts

@RouteConfig([
    { path: '/',             name: 'Home',     component: Home },
    { path: '/products/...', name: 'Products', component: Products },
    { path: '/**',           redirectTo: ['Home'] }
])

products.ts

@RouteConfig([
    { path: '/',   name: 'ProductTeaser', component: ProductsTeaser, useAsDefault: true },
    { path: '/milk', name: 'Milk',          component: Milk },
    { path: '/**',    redirectTo: ['ProductTeaser'] }
])

从应用程序本身到嵌套路由没有问题，但如果我尝试直接在浏览器中加载url（products/milk），则状态不会加载（index.html就在那里，并且app contructor被调用）

如果我去/products它按预期工作，但不适用于二级路线

任何人都可以帮我解决这个问题吗？

更新1 ：由于我不知道如何在plunkr / fiddle中有效地显示此问题，我只是将所有内容放在此处。

app.ts

import 'reflect-metadata';
import 'zone.js/dist/zone';

import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';
import {Home} from "./imports/home/home";
import {Products} from "./imports/products/products";
import {Admin} from "./imports/admin/admin";
import {Header} from "./imports/components/header/header";

@Component({
    selector: 'app',
    templateUrl: 'client/app.html',
    directives: [ROUTER_DIRECTIVES, Header]
})

@RouteConfig([
    { path: '/',             name: 'Home',     component: Home },
    { path: '/admin',        name: 'Admin',    component: Admin },
    { path: '/products/...', name: 'Products', component: Products },
    { path: '/**',           redirectTo: ['Home'] }
])

class Dairy {
    constructor() {
    }
}

bootstrap(Dairy, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue : '/' })
]);

app html

<div class="container-fluid">
    <div class="container content">
        <router-outlet></router-outlet>
    </div>
</div>

products.ts

import 'reflect-metadata';
import {Component} from 'angular2/core';
import {Milk} from "./milk/milk";
import {RouteConfig, RouterOutlet} from "angular2/router";
import {ProductsTeaser} from "./products-teaser/products-teaser";

@Component({
    selector: 'products',
    templateUrl: '/client/imports/products/products.html',
    directives: [RouterOutlet]
})

@RouteConfig([
    { path: '/',   name: 'ProductTeaser', component: ProductsTeaser, useAsDefault: true },
    { path: '/milk', name: 'Milk',          component: Milk },
    { path: '/**',    redirectTo: ['ProductTeaser'] }
])

export class Products{

}

产品html

<h1>All products</h1>
<div>
    <router-outlet></router-outlet>
</div>

更新2 ：

我正在使用角度2.0.0-beta.15

服务器是METEOR@1.3.2.4

我通过以下链接导航到州：

<a [routerLink]="['Products', 'Milk']">Milk</a>

Chrome 50和IE 11上的行为相同

从评论到已删除的答案

使用HashLocationStrategy正在运行，但这不是我想要的。 AFAIK angular 2应该能够在加载时解析状态（调用app构造函数）。我没有得到404服务器正确重定向请求

更新3： 我开始使用firebase，一切都很完美，所以在我看来这是一种与服务器相关的东西。

Angular 2 Deep Link to Child Router无法解析

0 个答案: