AngularDart - 如何替换 AppLayout 中的组件

Posted 2023-03-13

【中文标题】AngularDart - 如何替换 AppLayout 中的组件

【英文标题】：AngularDart - How to replace a component in AppLayout

【发布时间】：2018-08-16 23:55:16

【问题描述】：

我想在点击应用布局的material-content 内的material-navigation 项目时将component-b 和component-c 替换为component-a。

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>

【问题讨论】：

我会使用路由 webdev.dartlang.org/angular/tutorial/toh-pt5 来做到这一点，另请参阅 github.com/dart-lang/angular/tree/master/angular_router 和 github.com/dart-lang/angular/blob/master/angular_router/g3doc/…

我已经在使用angular_router 进行操作，但是如何在所有组件中包含应用程序布局。是否需要在每个组件中编写抽屉和标题代码。

不，您将<component-a></component-a> 替换为<router-outlet></router-outlet>，路由器将根据活动路由将其替换为<component-a></component-a>、<component-b></component-b>、<component-c></component-c>。然后，您可以创建链接以从一条路线导航到另一条路线（或在代码中进行）。另一个优点是浏览器 URL 栏反映了状态（活动路由是什么）。

你使用的是什么 Angular 版本？

dependencies: angular: "^4.0.0+2"

【参考方案1】：

您有多种选择：

使用NgIfs 来控制根据某些条件显示哪个小部件 - 如果您有两个或三个标准小部件，这很好 如果您的客户需要显示任何组件，请使用 DynamicComponent - 然后您可以将 *ComponentFactory 传递给任何小部件 如果您有更多定义明确的组件并希望在 URL 中轻松反映状态，请使用 Router。