11

我正在使用 AngularDart 和路由。我的观点是包含单个组件的单行代码。我觉得这些观点没有发挥作用。我可以直接路由到组件吗？

例子：

router.root
  ..addRoute(
      name: 'welcome',
      path: '/welcome',
      defaultRoute: true,
      enter: view('views/welcome.html'))
  ..addRoute(
      name: 'camera',
      path: '/camera',
      enter: view('views/camera.html'));

这是views/welcome.html

<welcome></welcome>

这是views/camera.html

<camera></camera>

如您所见，这些观点相当薄弱。我宁愿说：“当你进入一个视图时，插入这个组件”

那可能吗？

4

2 回答 2

6

现在好像直接支持这个

见https://github.com/angular/angular.dart/issues/425

您可以路由到内联模板 ( viewHtml)：

views.configure({
  'foo': ngRoute(
      path: '/foo',
      viewHtml: '<foo-component></foo-component>')
});
于 2014-04-18T06:32:33.193 回答
4

我想问同样的问题，但你是第一个！我找到了一个解决方案，可能不是最好的，但至少它有效。

我为所有路线创建了一个 html：

dyn_view.html：

<div><dynamic-view></dynamic-view></div>

当然还有一个组件动态视图，它从路由提供程序获取实际组件标记名称，并使用此处描述的技术动态添加到 DOM：如何在 Angular.Dart 中以编程方式添加组件？

动态视图.html

<div></div>

动态视图.dart

@NgComponent(
    selector: 'dynamic-view',
    templateUrl: 'view/dynamic_view.html'
)
class DynamicView implements NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  String elementName;

  DynamicView(this.compiler, this.injector, RouteProvider provider) {  
    elementName = provider.parameters["elementName"];
  }

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("div");
    inner.appendHtml("<$elementName></$elementName>");    
    BlockFactory template = compiler(inner.nodes);
    var block = template(injector);
    inner.replaceWith(block.elements[0]); 
  }
}

现在路由器。元素名称必须以某种方式传递给 RouteProvider。我受到这篇文章的启发：在加载控制器之前验证路由先决条件

class DynamicViewFactory {
  ViewFactory viewFactory;
  DynamicViewFactory(this.viewFactory);

  call(String elementName) {
     return (RouteEvent event) {
       event.parameters["elementName"] = elementName;
       viewFactory("view/dyn_view.html")(event);
     };
  }
}



class MyRouteInitializer implements RouteInitializer {

  init(Router router, ViewFactory view) {
    DynamicViewFactory dynView = new DynamicViewFactory(view);
    router.root
      ..addRoute(
          name: 'route1',
          path: '/a/:b',
          enter: dynView('componentA'))
      ..addRoute(
          name: 'route2',
          path: '/b/:c',
          enter: dynView('componentB'));
  }
}

上面的代码在我实际使用的基础上略有修改，所以可能会有一些小错误，但大体思路是一样的。

希望有帮助！

于 2014-01-15T17:33:15.633 回答