Может ли AngularDart напрямую обращаться к компоненту?

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

Я хотел задать тот же вопрос, но вы были первыми! Я нашел решение, возможно, не самое лучшее, но, по крайней мере, оно работает.

Я создал один 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')); 
    } 
} 

Приведенный выше код немного изменен от того, что на самом деле я использую, так что он может иметь некоторые мелкие ошибки, но общая идея та же.

Надеюсь, что это поможет!

Answer 2

Это, кажется, прямо теперь поддерживается

https://github.com/angular/angular.dart/issues/425 см

Вы можете направить в шаблон инлайн (viewHtml):

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