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

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

我想说，通过所有这些事件对我来说感觉有点像气味。组件本身正在破坏封装，所以我不会像那样构建应用程序。

我可能会将抽屉的内容作为一个组件，也许 header 和 body 取决于它们的复杂程度。要有更多这样的东西：

<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>

我发现如果可能的话，最好将 app-layout 逻辑保留在相同的组件中并封装其中的各个部分。您也可以将抽屉作为输入传递，但这样您就会产生高度耦合，而我倾向于尽量不这样做。

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

AngularDart Passing Toggle Event from one component to another Component

dart

angular-dart