Angular Materialを使ってダッシュボードを実装する
8927 ワード
Angular MaterialのSchematicsを使って、3分でダッシュボードを実装する。
コマンドをいくつか叩く。
$ ng new schematics-sample
? Would you like to add Angular routing? Yes
$ ng add @angular/material
$ ng g @angular/material:address-form form
$ ng g @angular/material:nav nav
$ ng g @angular/material:table table
$ ng g @angular/material:dashboard dashboard
$ ng g @angular/material:tree tree
ファイルを3つだけ修正する。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormComponent } from './form/form.component';
import { TableComponent } from './table/table.component';
import { TreeComponent } from './tree/tree.component';
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'form', component: FormComponent },
{ path: 'table', component: TableComponent },
{ path: 'tree', component: TreeComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
nav.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink]="['/']">Top</a>
<a mat-list-item [routerLink]="['/form']">Form</a>
<a mat-list-item [routerLink]="['/table']">Table</a>
<a mat-list-item [routerLink]="['/tree']">Tree</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>schematics-sample</span>
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
app.component.html
<app-nav>
<router-outlet></router-outlet>
</app-nav>
ダッシュボードの実装完了です。
Author And Source
この問題について(Angular Materialを使ってダッシュボードを実装する), 我々は、より多くの情報をここで見つけました https://qiita.com/shinoshu/items/62f114e7efbc75c18ac4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .