Question

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

正如您所看到的，这些观点非常薄弱。我更愿意说：“当你进入视图时，插入这个组件”

这可能吗？

Answer 1

这似乎现在直接支持

请参阅https://github.com/angular/angular.dart/issues/425

您可以路由到内嵌模板（viewHtml）：

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

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

上面的代码稍微修改了我实际使用的内容，所以它可能有一些小错误，但总体思路是一样的。

希望有所帮助！

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

2 个答案: