Question

我对材质2设计的棱角4非常新。我有一个基本的问题。

我在app.component.html中有我的代码，它基本上只提供了很少的mat-card组件。

单击mat-card组件内的任何链接都应该使用另一组组件更改整个视图。

从技术上讲，我可以使用* ngIf构造来显示隐藏。但这会使整个app.component.html太大而且难以管理。

所以，像离子3一样有角度4材质的页面这样的概念吗？

实现这一目标的推荐方法是什么。

当前页面如下：

      <div fxLayout="row" style="padding:10px">
                      <mat-card class="dashboard-widget-1-2">
                            <mat-card-title class="card-title">Favorite Searches</mat-card-title>
                            <mat-card-content>
                                  <div fxLayout="column">
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">Account with open opportunities</div>
                                        <div class="widget-para-title fa-text-link" style="border-bottom: 1px solid #8D8D8D">My open opportunities</div>
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">My strategic customers</div>
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">My customer with upcoming renewals</div>
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">My customer with open service requests</div>

                                  </div>
                            </mat-card-content>
                      </mat-card>
</div>

目前在同一个地方应该完全转到新页面

  <div fxFlex="95%">
            <mat-tab-group [selectedIndex]="core.selectedTab">
                        <mat-tab *ngFor="let tb of core.dynTabs">
                        <ng-template mat-tab-label *ngIf="tb.closable == 'true'">
                              {{tb.label}}&nbsp;&nbsp;<mat-icon (click)="removeTab()">close</mat-icon>
                        </ng-template>
                        <ng-template mat-tab-label *ngIf="tb.closable == 'false'">
                              {{tb.label}}
                        </ng-template>
                        <div>      
                              <app-opty-list *ngIf="tb.label == 'Opportunities'"></app-opty-list>
                              <app-edit-opty *ngIf="tb.label != 'Opportunities'"></app-edit-opty>
                        </div>
                        </mat-tab>
            </mat-tab-group>
            </div>

Answer 1

您需要在应用程序中设置路由。您可以在此处阅读有关强大的Angular路由器的更多信息：https://angular.io/guide/router#the-basics

一个小例子可以帮助你理解这个概念：

//app.component.html
<div class="links">
    <a routerLink="/home">Home</a>
    <a routerLink="/about">About</a>
</div>
<router-outlet></router-outlet>

//app.module.ts
@NgModule({
imports: [
RouterModule.forRoot(
  [
     {
        path: 'home',
        component: HomeComponent
     },
     {
        path: 'about',
        component: AboutComponent
     }
  ]
)
// any other imports
],
  ...
})
export class AppModule { }

在此设置中，无论何时单击其中一个链接（Home或About），路径引用的组件都将附加在<router-outlet>指令的正下方。

角度4材料做页面导航

1 个答案: