骨刻文字数字化识别8

---

一、引入自定义的scss

组件内引入scss，还是要依靠组件注解@Component中的属性stylesUrl。

@Component的styleUrl属性接受的是一个字符串数组，字符串引入的scss文件地址。如果样式比较简单的话也可以用styles属性自己写，接受的是一个反引号数组，但是我个人不太推荐。

在\src\app\component\host-item\html的文件下新建gundam-host-item.component.scss文件并增加一些scss样式：

.hostItem{
  padding: 10px;
}
.viewDetail{
  float: right;
}

二、修改相应的文件

修改detail页面
用同样的方法，修改一下详情页面，使其能展示机体更多的参数。

修改gundam-detail.component.ts (其实没做啥,只是引入scss)

import {
  Component,
  OnInit
} from '@angular/core';
import {
  Gundam
} from '../../model/gundam';
import {
  ActivatedRoute,
  Params
} from '@angular/router';
import { GundamService } from '../../service/gundam.service';
import 'rxjs/add/operator/switchMap';

@Component({
  templateUrl: './html/gundam-detail.component.html',
  styleUrls: ['./html/gundam-detail.component.scss']
})

export class GundamDetailComponent implements OnInit {
  selectedGundam: Gundam;
  gundamStr: string;
  gundamId: number;
  constructor(
    private route: ActivatedRoute,
    private gundamService: GundamService,
  ) {}

  ngOnInit(): void {
    this.route.params.switchMap((params: Params) => this.gundamService.getGundamById(+params['id']))
      .subscribe( gundam => this.selectedGundam = gundam );
  }


}