AngularDart 可以直接路由到组件吗？答案

【问题标题】：Can AngularDart route directly to a component?AngularDart 可以直接路由到组件吗？
【发布时间】：2014-01-30 03:21:34
【问题描述】：

我正在使用 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>

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

这可能吗？

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

现在好像直接支持这个了

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

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

views.configure({
  'foo': ngRoute(
      path: '/foo',
      viewHtml: '<foo-component></foo-component>')
});

【讨论】：

【解决方案2】：

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

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

dyn_view.html：

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

当然还有一个组件动态视图，它从路由提供者那里获取实际的组件标签名称，并使用此处描述的技术动态添加到 DOM：How to add a component programatically in Angular.Dart?

dynamic_view.html

<div></div>

dynamic_view.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。我受到这篇文章的启发：Verifying route preconditions prior to loading controller

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'));
  }
}

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

希望有帮助！

【讨论】：

酷！我想知道您是否可以将它作为 pub 包发送，以便我和其他人可以使用它。如果您确实发布了它，请告诉我。
你的模块看起来怎么样？我没有将 RouteProvider 注入 DynamicView。
我的应用基于 Angular 教程：github.com/angular/angular.dart.tutorial/tree/master/Chapter_06。模块看起来像这样：' class MyModule extends Module { MyModule() { type(QueryService);类型（动态视图）； // 组件类型(ApplicationComponent);类型（屏幕组件）； ...类型（RouteInitializer，implementedBy：MyRouteInitializer）； factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); } }'
添加了一些功能后，另一个答案会更好。