首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >AngularDart -如何替换AppLayout中的组件

AngularDart -如何替换AppLayout中的组件
EN

Stack Overflow用户
提问于 2018-03-08 23:08:20
回答 1查看 409关注 0票数 1

我想要替换来自component-bcomponent-ccomponent-a,同时单击应用布局的material-content中的material-navigation项目。

app_layout_component.dart

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2018-03-09 00:18:17

您有多个选项:

  • 使用NgIfs来控制根据某些条件显示哪个小部件-如果您有两个或可能三个标准小部件
  • 使用DynamicComponent如果您的客户端需要显示任何组件-那么您只需为任何小部件传递*ComponentFactory
  • 如果您有更多定义良好的组件并希望状态可以轻松反映在
  • 中,则可以使用Router。<代码>H29<代码>F210
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49176335

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档