Question

从这里开始：

https://github.com/dart-lang/angular_components_example/blob/master/example/app_layout_example/lib/app_layout_example.html

我想将此模板分为两个模板：

侧边栏<material-drawer>的一个名称，例如sidebar_component.{dart,html}
<div class="material-content">的另一个名称，例如app_component.{dart,html}

问题：

如何通过sidebar_component到达<material-drawer>，并用<material-button icon class="material-drawer-button" (trigger)="drawer.toggle()">进入app_component？

Answer 1

组件被有目的地封装。因此，没有一种超级容易的方法可以将一个组件封装到另一个组件中。

您可以做的是创建从一个组件到另一个组件的传递。

<side-bar #sidebar></side-bar>
<app-component (openSideBar)="sidebar.toggle()"></app-component>

sidebar_component

@Component()
class SidebarComponent {
  @ViewChild(MaterialPersistentDrawerDirective)
  MaterialPersistentDrawerDirective drawer;

  void toggle() => drawer.toggle();
}

app_component.dart

@Component()
class AppComponent {
  final _openSideBar = StreamController<void>();

  @Output()
  Stream<void> openSideBar => _openSideBar.stream;

  // This is getting called by the trigger of the button click
  void onButtonClick() => _openSideBar.add();
}

我想说对我来说，所有这些事件的传递都让人有些嗅觉。组件本身正在破坏封装，所以我不会像那样设计应用程序。

我可能会让抽屉的内容成为一个组件，取决于标题的复杂程度，可能是标题和正文。要拥有更多类似这样的东西：

<material-drawer #drawer>
  <side-bar *deferredContent></side-bar>
</material-drawer>
<div class="material-content">
  <app-header class="material-header shadow" (triggerDrawer)="drawer.toggle()">
  </app-header>
  <router-outlet></router-outlet>
</div>

我发现最好将应用程序布局逻辑尽可能保留在相同的组件中，并封装其中的各个部分。您也可以将抽屉作为输入，但是随后您将使那些高度耦合的对象变得更容易尝试。

AngularDart将切换事件从一个组件传递到另一个组件

1 个答案: