web-dev-qa-db-ja.com

子路内のangular素材でルーテッドタブを実装する方法？

Angularマテリアルタブ https://material.angular.io/components/tabs タブ内のルータのナビゲーションを使用します。

ドキュメントに示されているように<nav mat-tab-nav-bar>を使用しようとしましたが、このチュートリアル： https://nirajsonawane.github.io/2018/10/27/angular-material-tabs-with-router/ そのようなテンプレートを見つけることができます。

<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of navLinks"
    [routerLink]="link.link"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>

しかし、問題は私のタブが私のアプリケーションのルートにないが、子ルートのサブモジュールにあります。私はそのようなものがあります：

App-routing-moduleでは、

const routes: Routes = [
  ...
  { path: 'subpath', loadChildren: () => import('./path-to-module/submodule.module').then(m => m.SubmoduleModule) },
  ...
];

サブモジュールルーティングモジュールでは、そのようなものがあるはずです。

const routes: Routes = [
  { path: '', component: FirstTabComponent },
  { path: 'tab2', component: SecondTabComponent },
]

私がurl /subpathにアクセスした場合、最初のタブを選択したタブが表示され、URL /subpath/tab2に移動すると、2番目のタブを選択したタブが表示されます。

どうやってそれをするかどうか？

angularangular-materialangular-router
5
S. Caruso

私は同じ問題を抱えていました。問題はルーティングモジュールから来ました。

インポートされた素材クラスを継承するためには、コンポーネントから指示される代わりに、子のパスを遅延ロードする必要があります。

これにより問題が発生しました。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: 'customers',
    // Don't use this method in order to link to children!
    component: 'CustomerListComponent'

  }

「顧客リスト」テンプレートがロードされましたが、フォーマットなし。また、Angularは、「MATタブの指示をどこにでも見つけることができなかったのでエラーを投げました。親コンポーネント、orders.module.ts。

これは解決策でした:src > app > app-routing.module.ts

const routes: Routes = [{
      path: 'customers',
      loadChildren: () =>
        import ('./customers/customers.module').then(m => m.CustomersModule)
    }

これがプロジェクトからの関連ファイルです：src > app > orders > orders.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';

// Material components
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    CommonModule,
    OrdersRoutingModule,
    MatTabsModule
  ],
  declarations: [
    OrderListComponent
  ]
})
export class OrdersModule { }

src > app > orders > orders-list > orders-list.component.html

<mat-tab-group>
  <mat-tab label="Orders">
    <ng-template matTabContent>
      <p>Orders here.</p>
    </ng-template>
  </mat-tab>
  <mat-tab label="Shipments">
    <ng-template matTabContent>
      <p>Shipments here.</p>
    </ng-template>
  </mat-tab>
  <mat-tab label="Archived">
    <ng-template matTabContent>
      <p>Really old orders here.</p>
    </ng-template>
  </mat-tab>
</mat-tab-group>
3
Alverson Layne

私の理解が正しい場合は、遅延ロードされたモジュールのコンポーネントに移動します。

このために私はスタックブリッツを作りました、そしてそれはあなたにとって有用かもしれません。

これはあなたの理解のための基本的なコードです

<nav mat-tab-nav-bar class="mat-elevation-z8" >
  <a
    mat-tab-link
    *ngFor="let link of navLinks"
    routerLink="{{ link.location }}"
    routerLinkActive
    #rla="routerLinkActive"
    [active]="rla.isActive"
  >
    <mat-icon>{{ link.icon }}</mat-icon>
    <span>{{ link.label | uppercase }}</span>
  </a>
</nav>
 _

tSで

 navLinks = [
    {location:'',label:'dummy',icon:'menu'},
    { location: '/shared', label: 'Overview', icon: 'account_circle' },
    { location: '/shared/sub', label: 'Experience', icon: 'work' }
  ];
 _

stackblitz

1
Anil Kumar Reddy A

私も同じ問題に遭遇しました。私は angular-atial-matical-tabs-with-router が子コンポーネントを持つ子コンポーネントで変更しました。

子コンポーネントはhomeと呼ばれ、home.component.html ITを実装します。

<nav mat-tab-nav-bar>
  <a mat-tab-link
  *ngFor="let link of navLinks"
  [routerLink]="link.link"
  routerLinkActive #rla="routerLinkActive"
  [active]="rla.isActive">
  {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>
 _

これにより、Notes、Photos、Documentsという3つのタブが作成されます。 Notesタブには、メモを一覧表示、表示、編集、削除するための追加コンポーネントが含まれています。

私はgithubにソースを作成して追加し、それをstackblitzにインポートしました：

github

stackblitz

0
janders

この代わりにJanders解決策はルータの依存関係を使用することです。 router.url()関数を使用すると、現在のアクティブなURLとナビゲーションリンクを比較できます。

Component.ts：

...

rootUrl = '/path/to/your/component';

  navigation = [
    {
      name: 'Table',
      link: '',
    },
    {
      name: 'Stats',
      link: '/stats',
    },
    {
      name: 'Settings',
      link: '/settings',
    },
    {
      name: 'Export',
      link: '/export',
    }
  ];

constructor(private route: ActivatedRoute, public router: Router) {
...
}

...

 _

Component.html：

...

  <nav mat-tab-nav-bar mat-align-tabs="left">
    <a mat-tab-link
       *ngFor="let l of navigation"
       [routerLink]="rootUrl + l.link"
       [active]="this.router.url === rootUrl + l.link">
      {{l.name}}
    </a>
  </nav>

...
 _

あなたのルーターで：


...

  {
    path: '/path/to/your/component',
    component: Component,
    canActivate: [AuthGuard],
    children: [
      {
        path:'',
        pathMatch: 'full',
        component: TableComponent
      },
      {
        path:'settings',
        pathMatch: 'full',
        component: SettingsComponent
      },
      {
        path:'export',
        pathMatch: 'full',
        component: ExportComponent
      },
      {
        path:'stats',
        pathMatch: 'full',
        component: StatsComponent
      }
    ]
  }

...

 _
0
Sebastian