angualr material 2 主题 头像列表 对话框 autocomplete

一，使用自定义主题：
1.在src/下新建theme.scss

theme.scss:
@import '~@angular/material/theming';

@include mat-core();

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent:  mat-palette($mat-pink, A200, A100, A400 );// 默认 亮 暗主题的深浅
$my-app-warn:    mat-palette($mat-red);

$my-app-theme: mat-light-theme($my-app-primary,
                               $my-app-accent,
                               $my-app-warn);

@include angular-material-theme($my-app-theme);

$my-dark-primary: mat-palette($mat-blue-grey);
$my-dark-accent:  mat-palette($mat-amber, A200, A100, A400 );// 默认 亮 暗主题的深浅
$my-dark-warn:    mat-palette($mat-deep-orange);

$my-dark-theme: mat-light-theme($my-dark-primary,
                               $my-dark-accent,
                               $my-dark-warn);

.myapp-dark-theme{
    @include angular-material-theme($my-dark-theme);
}

然后在style.scss里把引入原来的主题的import改为：
@import 'theme.scss';

在header.component.html里新增mat-slide-toggle按钮，开关黑夜模式，别忘了在Shared里import和export：
<mat-toolbar color="primary">
<button mat-icon-button (click)="openSidebar()">
  <mat-icon>menu</mat-icon>
</button>

<span>企业协作平台</span>
<span class="fill-remaining-sapce"></span>
<mat-slide-toggle (change)="onChange($event.checked)">黑夜模式</mat-slide-toggle>
</mat-toolbar>

header.component.ts:增加toggle来监听事件
import { Component, OnInit, Output, EventEmitter } from '@angular/core';



@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  @Output() toggle = new EventEmitter<void>();

  constructor() {

   }

  ngOnInit() {
  }
  openSidebar(){
    this.toggle.emit();
  }

  @Output() toggleDarkTheme = new EventEmitter<boolean>();
  onChange(checked: boolean){
    this.toggleDarkTheme.emit(checked);
  }
}


app.component.html:
<mat-sidenav-container [class.myapp-dark-theme]="darkTheme">
  <mat-sidenav #sidenav  mode="over">
    <app-sidebar></app-sidebar>
  </mat-sidenav>

  <div class="site">
    <header>
      <app-header (toggle)="sidenav.toggle()" 
      (toggleDarkTheme)="switchTheme($event)"
      ></app-header>
    </header>
    <main>
      <router-outlet></router-outlet>

    </main>
    <footer>
      <app-footer></app-footer>
    </footer>
  </div>
</mat-sidenav-container>

app.component.ts 增加darkTheme变量:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  darkTheme = false;
  switchTheme(dark){
    this.darkTheme = dark;
  }
}

逻辑：在header里点击黑夜模式按钮，把值传入toggleDarkTheme变量，toggleDarkTheme变量output，然后在app里监听：
(toggleDarkTheme)=”switchTheme($event)”，把toggleDarkTheme的值传入switchTheme,改变darkTheme，
darkTheme是true的时候，激活黑夜模式：
[class.myapp-dark-theme]=”darkTheme”

二，头像列表
GridList:用于相似的数据展示，尤其是图片，如相册等，行为很像表格，如colspan，rowspan
首先加个路由到注册页面：

login-routing.module.ts：
import { RegisterComponent } from "./register/register.component";
const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent }
];

login.cmponent.html:
<p>还没有账户？<a routerLink="/register">注册</a></p>

md-grid-list可以设置rowHeight
md-grid-tile可以设置 colspan,rowspan
没有头像svg集合，跳过这个。
如果有的话，应该是：

svg.util.ts:
const avatarDir = `${imgDir}\avatar`;
ir.addSvgIconSetInNameSpace('avatars', ds.bypassSecurityTrustResourceUrl(`${avatarDir}\avatars.svg`));//svg图标集合

Register.component:
items: string[];
ngOnInit(){
    const nums = [1, 2, 3,4 ,5, 6,7 ,8 ,9 ,10,11,12,13,14,15,16];
    this.items = nums.map(d => `avatars:svg-${d}`);
}

Register.component.html:
<mat-grid-list cols="6" rowHeight="1:1">
          <mat-grid-tile *ngFor="let item of items">
            <mat-icon [svgIcon]="item"></mat-icon>
          </mat-grid-tile>
</mat-grid-list>

大概是要item=avatars:svg-11（svg-11试是svg集合里的id）

dialog 对话框

对话框需要在模块中的entryComponents中声明
传递数据：const dialogRef = dialog.open(YourDialog,{data:'your data',});
接收数据：constructor(@Inject(MD_DIALOG_DATA public data:any){}

下面要开发任务列表，新增任务，删除任务之类的：

ng g m project
ng g c project/project-list
ng g c project/project-item
ng g c project/new-project
ng g c project/invite


Uncaught Error: Template parse errors:
Can't bind to 'item' since it isn't a known property of 'app-project-item'.
---》多保存几遍...好奇怪

new-project:
 Error: StaticInjectorError(AppModule)[ProjectListComponent -> MatDialog]: 没引入MatDialogModule

Autocomplete