由于今天被分派了学到目前为止的 Angular 工作，所以我尝试着在界面设计方面努力，整理了一些技巧备用。

图像上传的多个实现方式

在Web开发中，上传图像是一种基本场景，而在Angular 4 + Material Design中，也有几种实现方法。

最开始

Angular Image Upload

尽管实际上已经实施了使用的计划, 但最终由于设计不够出色的原因, 我们还是决定放弃。还有其他几个解决方案可供选择。

ng2-file-upload

这是相当酷的。还有进度条。但是，有点复杂。

Materialized: File Upload

这个东西超级酷。通过拖放实现了交互性和美观性。但是它是用jQuery实现的，所以有点犹豫。此外，大多数完整度较高的东西只适用于Angular 1.x。我很困扰，但最终决定不使用任何插件来实现。

图片上传的实现

最终我决定采用简洁的卡片形式。但事实上，Angular4 + Material Design (Angular Material) 不支持文件类型为”type=file”的输入，也就是上传文件的输入。如果按照常规做法，会显得很笨拙。

嗯。這太不酷了。明明其他地方都支持物料設計，怎麼會變成這樣呢…要怎麼讓它變成上面那樣呢？方法就是這樣。給它加上標籤，然後將物料設計的樣式表類別應用到該標籤中。將input本身設置為隱藏。

<input hidden="true" id="input-file-id" type="file" accept="image/*" (change)="upload(fl.files)"/>
<label for="input-file-id" class="mat-raised-button mat-basic">Choose image</label>

这是根据以下文章进行参考并重新编写的 Angular Material 版本。思路相同。

File Upload with Angular Material

在画面切换中苦苦挣扎

另外，还存在一个低级问题，就是一开始进行路由操作，但是画面无法切换。我查看了手册。

app-routing.modules.ts 的内容需要進行再描述，默认只需要给一個选项。

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

import { DashboardComponent } from './dashboard.component';
import { CarDetailComponent } from './car-detail.component';

const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'detail', component: CarDetailComponent }
];

@NgModule({
    imports: [ RouterModule.forRoot(routes)],
    exports: [ RouterModule]
})
export class AppRoutingModule {}

app.module.ts 的中文翻译 ：”应用模块.ts”

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ImageUploadModule } from 'angular2-image-upload';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';
import { CarDetailComponent } from './car-detail.component';
import { DashboardComponent } from './dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    CarDetailComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ImageUploadModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

即使按照手册的指示，例如下面这样写，当发生gotoDetail()事件时，URL确实会切换，但屏幕并未切换，这让我很困惑。

export class AppComponent {
  title = 'Car Reviews';
  constructor(private router: Router) {}

    gotoDetail(): void {
      this.router.navigate(['/detail']);
    }
}

总结起来，就是说你应该好好读一下说明书！

角度指南：路由教程

的标签部分将用于处理页面切换。最初时，

app-routing.module.ts
app.component.html
app.component.ts
app.mdoule.ts
some-detail.component.html
some-detail.component.ts
material.module.ts

由于是一个2个屏幕的应用程序，所以只创建了与app.component相配合的2个组件集，但结果不好。最好是在app.component中编写每个屏幕共享的处理逻辑。现在，屏幕定义仅包括标题和页脚，并且仅用标签进行表示。

app.component.html
应用组件。

<md-toolbar color="primary">
  <md-icon class="example-icon">collections</md-icon>
  <span>{{title}}</span>
  <span class="example-spacer"></span>
  <md-icon class="example-icon">home</md-icon>
</md-toolbar>

<router-outlet></router-outlet>

<md-toolbar color="light" role="aria-labelledby" class="footer">
    <span class="example-spacer"></span>
    <span><font size="3">Serverless!</font></span>
    <md-icon class="example-icon">flash_on</md-icon>
  </md-toolbar> 

最终文件结构大致如下。基本上每个画面需要一个完整的集合，包括.ts和.html文件。

app-routing.module.ts
app.component.html
app.component.ts
app.mdoule.ts
some-detail.component.html
some-detail.component.ts
dashboard.component.html
dashboard.component.ts
material.module.ts

将页脚放置在底部

这只是简单地在CSS中添加一个类，在之前的页脚中添加了一个类。通过调整大小来达到这种效果。文字大小通过等进行调整。

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20px;
  }

给图标

图标很简单。

MATERIAL DESIGN: Icons

只需搜索相應的圖標，然後按照以下方式進行即可。用 md-icon 包圍起來會更好。順便說一句，含有空格的圖標名稱可用 _ 連接。

<button md-fab color="accent"><md-icon class="example-icon">file_upload</md-icon></button>

Angular 图片上传的错误

起初，我实际上是想使用Angular Image upload ，根据示例代码写了下面这段代码。

<image-upload
                        url="https://httpbin.org/status/200"
                        buttonCaption="PRESS ME AAAAAAAAAH"
                        dropBoxMessage="DROP ON ME AAAAAAAAAH"
                        clearButtonCaption="CLEAR ME AAAAAAAAAH"
                        [uploadedFiles]="images">
                      </image-upload>

遇到了这样的错误。就像往常一样，JavaScript 的错误一开始看不懂。

ERROR TypeError: Cannot read property 'length' of undefined

可以这样总结，只需拆掉最后一个。

<image-upload
                        url="https://httpbin.org/status/200"
                        buttonCaption="PRESS ME AAAAAAAAAH"
                        dropBoxMessage="DROP ON ME AAAAAAAAAH"
                        clearButtonCaption="CLEAR ME AAAAAAAAAH">
                      </image-upload>

尽管可以走上街头，但也太过土气了…

总结

我今天遇到了一些问题，我把学到的东西记了下来。由于我第一次接触Angular2和Material Desgin，可能会有很多误解。如果那时您能指出来，我将非常感激。

资源

• Angular Example

http://httpbin.org/status/200 <- こんなのあるのね。便利

Material Deign – introduction をちゃんと読む方がいいのかな。