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 に答える