1

我在 angular dart 中显示嵌套视图时遇到问题。顶级导航工作得很好，但我无法在团队视图中导航。我知道1.0版本刚刚发布，但我希望有人能给我提示或解决方案：

这是路由器（fremad_route_initializer.dart）：

part of fremad;

void fremadRouteInitializer(Router router, RouteViewFactory view) {
  view.configure({
    'home': ngRoute(
      path: '/home',
      viewHtml: '<home-view></home-view>',
      defaultRoute: true
      ),
    'team': ngRoute(
      path: '/team', 
      viewHtml: '<team-view></team-view>',
      mount: {
          "fixture" : ngRoute(
             path: '/fixture',
             viewHtml: '<show-team-fixture></show-team-fixture>'
          ),
          "table" : ngRoute(
             path: '/table',
             viewHtml: '<show-team-table></show-team-table>'
          )
      }),
    'sponsors': ngRoute(
      path: '/sponsors', 
      viewHtml: '<sponsors-view></sponsors-view>'
      )
  });
}

这是我的应用程序：

library fremad;

import 'dart:html' as html;
import 'dart:async';
import 'dart:convert';

import 'package:angular/angular.dart';
import 'package:angular/animate/module.dart';

part 'components/header_component.dart';
part 'components/main_menu_component.dart';
part 'components/footer_component.dart';

part 'components/home_view_component.dart';
part 'components/sponsors_view_component.dart';
part 'components/team_view_component.dart';

part 'components/team/fixture_view_component.dart';
part 'components/team/table_view_component.dart';

part 'fremad_route_initializer.dart';
part 'global_http_interceptors.dart';

class FremadApp extends Module {
  FremadApp(){


    bind(HeaderComponent);
    bind(MainMenuComponent);
    bind(FooterComponent);

    bind(ShowHomeComponent);
    bind(ShowSponsorsComponent);
    bind(ShowTeamComponent);

    bind(ShowTeamFixtureComponent);
    bind(ShowTeamTableComponent);

    bind(RouteInitializerFn, toValue: fremadRouteInitializer);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));

    bind(UrlRewriter, toImplementation: FremadUrlRewriter);
  }
}


@Injectable()
class FremadUrlRewriter implements UrlRewriter {
  String call(url) =>
      url.startsWith('lib/') ? 'packages/fremad/${url.substring(4)}' : url;
}

这是 index.html：

<!DOCTYPE html>

<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fremad</title>

<link rel="stylesheet" href="fremad.css">

</head>
<body>
  <div id="wrapper">

    <header-item></header-item>
    <main-menu></main-menu>
    <div id="wrapper-body">

      <ng-view></ng-view>

      <div class="clearfix"></div>
    </div>
    <footer-item></footer-item>
  </div>

<script async type="application/dart" src="fremad_main.dart"></script>
<script async src="packages/browser/dart.js"></script>

</body>
</html>

Team_view.html：

<nav id="team-nav">
    <ul>
        <li><a href="#/team/about">About</a></li>
        <li><a href="#/team/players">Players</a></li>
        <li><a href="#/team/fixtures">Fixtures</a></li>
        <li><a href="#/team/table">Table</a></li>
    </ul>
</nav>

<ng-view></ng-view>

在 team_view_component.dart 中：

part of fremad;

@Component(
    selector: 'team-view',
    publishAs: 'ctrl',
    templateUrl: 'packages/fremad/components/team_view.html',
    useShadowDom: false
)
class ShowTeamComponent {
  void create() {
    html.window.console.info("Is in ShowTeamComponent");
  }
}

在fixture_view_component.dart 中：

part of fremad;

@Component(
    selector: 'team-fixture-view',
    publishAs: 'ctrl',
    templateUrl: 'packages/fremad/components/team/fixture_view.html',
    useShadowDom: false
)
class ShowTeamFixtureComponent {
  void create() {
    html.window.console.info("Is in ShowTeamFixtureComponent");
  }

}
4

1 回答 1

1

只是一个愚蠢的错误：

在 fremad_route_initializer.dart 中，我使用了“show-team-fixture”，而在 fixture_view_component.dart 中，我使用了“team-fixture-view”。现在它正在工作..

于 2014-10-16T11:19:57.673 回答