Подтвердить что ты не робот

Может ли AngularDart напрямую перейти на компонент?

Я использую 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>

Как вы можете видеть, эти взгляды довольно слабы. Я скорее говорю: "когда вы вводите представление, вставьте этот компонент"

Возможно ли это?

Ответ 1

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

Я создал один html для всех маршрутов:

dyn_view.html:

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

и, конечно, динамический вид компонента, который принимает фактическое имя тега компонента от поставщика маршрута и динамически добавляет в DOM с помощью описанной здесь методики: Как добавить компонент программно в 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. Я был вдохновлен этим сообщением: Проверка предварительных условий маршрута перед загрузкой контроллера

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

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

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

Ответ 2

Кажется, это прямо сейчас поддерживается

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

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

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