angular - AngularDart-如何在AppLayout中替换组件

Question

我想在单击“应用布局”的component-a内的component-b项时，从component-c和material-navigation替换material-content。

app_layout_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';

@Component(
    selector: 'app-layout',
    directives: const [
      DeferredContentDirective,
      MaterialButtonComponent,
      MaterialIconComponent,
      MaterialListComponent,
      MaterialListItemComponent,
      MaterialPersistentDrawerDirective,
      MaterialToggleComponent,

    ],
    templateUrl: 'app_layout_component.html',
    styleUrls: const [
      'app_layout_component.css',
      'package:angular_components/app_layout/layout.scss.css',
    ])
class AppLayoutComponent {
  bool end = false;
}

app_component.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
  <material-list *deferredContent>
    <div group class="mat-drawer-spacer"></div>
    <div group>
      <material-list-item>
        <material-icon icon="inbox"></material-icon>Inbox
      </material-list-item>
      <material-list-item>
        <material-icon icon="star"></material-icon>Star
      </material-list-item>
      <material-list-item>
        <material-icon icon="send"></material-icon>Sent Mail
      </material-list-item>
      <material-list-item>
        <material-icon icon="drafts"></material-icon>Drafts
      </material-list-item>
    </div>
    <div group>
      <div label>Tags</div>
      <material-list-item>
        <material-icon icon="star"></material-icon>Favorites
      </material-list-item>
    </div>
  </material-list>
</material-drawer>
<material-content>
  <header class="material-header shadow">
    <div class="material-header-row">
      <material-button icon
                       class="material-drawer-button" (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
      </material-button>
      <span class="material-header-title">Simple Layout</span>
      <div class="material-spacer"></div>
      <nav class="material-navigation">
        <a href="#AppLayout">Link 1</a>
      </nav>
      <nav class="material-navigation">
        <a href="#AppLayout">Link 2</a>
      </nav>
      <nav class="material-navigation">
        <a href="#AppLayout">Link 3</a>
      </nav>
    </div>
  </header>

  <component-a></component-a>

</material-content>

Answer 1

您有多种选择:

使用NgIf来控制基于某些条件显示的窗口小部件-如果您有两个或三个标准窗口小部件

，这很好

如果您的客户需要显示任何组件，请使用DynamicComponent-然后，您可以将* ComponentFactory传递给任何小组件

如果您定义的组件更多，并且希望状态可以轻松反射(reflect)在URL中，请使用Router。