{"id":39331,"date":"2023-11-19T12:34:50","date_gmt":"2023-03-21T17:51:35","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/"},"modified":"2024-05-04T09:49:13","modified_gmt":"2024-05-04T01:49:13","slug":"%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/","title":{"rendered":"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807"},"content":{"rendered":"

\u5f15\u8a00<\/h1>\n

\u5728\u672c\u6587\u4e2d\uff0c\u521b\u5efa\u50cf\u8fd9\u91cc\u4e00\u6837\u7684\u526a\u88c1\u56fe\u6807\u5bf9\u8bdd\u6846\u3002<\/p>\n

\"\"<\/div>\n

\u8fd9\u91cc\u6709\u4e00\u4e2a\u4f8b\u5b50\u3002<\/p>\n

 <\/p>\n

\u5b89\u88c5\u8f6f\u4ef6\u5305<\/h3>\n

\u5b89\u88c5@angular\/material<\/p>\n

$ ng add @angular\/material\r\n<\/code><\/pre>\n
\u5b89\u88c5ngx-image-cropper<\/p>\n
$ npm i ngx-image-cropper\r\n<\/code><\/pre>\n
\u5c06index.html\u6587\u4ef6\u6dfb\u52a0\u5230Material Icon\u751f\u6548\u3002<\/p>\n
<link\r\n  href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\"\r\n  rel=\"stylesheet\"\r\n\/>\r\n<\/code><\/pre>\n
\u5c06style.scss\u6dfb\u52a0\u5230\u5f71\u54cdMaterial\u4e3b\u9898\u7684\u90e8\u5206\u3002<\/p>\n
@import '~@angular\/material\/prebuilt-themes\/indigo-pink.css';\r\n<\/code><\/pre>\n
\u7f16\u7801<\/h1>\n
\u56fe\u7247\u88c1\u526a\u5bf9\u8bdd\u6846<\/h3>\n
\u56fe\u50cf\u88c1\u526a\u5bf9\u8bdd\u6846.ts<\/h4>\n
import<\/span> {<\/span> ChangeDetectorRef<\/span>,<\/span> Component<\/span>,<\/span> Inject<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatDialogRef<\/span>,<\/span> MAT_DIALOG_DATA<\/span> }<\/span> from<\/span> '<\/span>@angular\/material<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span>\r\n  base64ToFile<\/span>,<\/span>\r\n  ImageCroppedEvent<\/span>,<\/span>\r\n  ImageTransform<\/span>,<\/span>\r\n}<\/span> from<\/span> '<\/span>ngx-image-cropper<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>image-cropper-dialog<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/image-cropper-dialog.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/image-cropper-dialog.scss<\/span>'<\/span>],<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ImageCropperDialog<\/span> {<\/span>\r\n  imageChangedEvent<\/span>:<\/span> any<\/span> =<\/span> ''<\/span>;<\/span>\r\n  croppedImage<\/span>:<\/span> any<\/span> =<\/span> ''<\/span>;<\/span>\r\n  rotation<\/span>:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>\r\n  scale<\/span>:<\/span> number<\/span> =<\/span> 1<\/span>;<\/span>\r\n  showCropper<\/span>:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>\r\n  containWithinAspectRatio<\/span>:<\/span> boolean<\/span> =<\/span> true<\/span>;<\/span>\r\n  transform<\/span>:<\/span> ImageTransform<\/span> =<\/span> {};<\/span>\r\n  defaultWidth<\/span>:<\/span> number<\/span>;<\/span>\r\n  defaultHeight<\/span>:<\/span> number<\/span>;<\/span>\r\n\r\n  constructor<\/span>(<\/span>\r\n    @<\/span>Inject<\/span>(<\/span>MAT_DIALOG_DATA<\/span>)<\/span> public<\/span> data<\/span>:<\/span> any<\/span>,<\/span>\r\n    private<\/span> readonly<\/span> dialogRef<\/span>:<\/span> MatDialogRef<\/span><<\/span>ImageCropperDialog<\/span>><\/span>,<\/span>\r\n    private<\/span> readonly<\/span> cd<\/span>:<\/span> ChangeDetectorRef<\/span>\r\n  )<\/span> {<\/span>\r\n    this<\/span>.<\/span>fileChangeEvent<\/span>(<\/span>data<\/span>.<\/span>event<\/span>);<\/span>\r\n  }<\/span>\r\n\r\n  fileChangeEvent<\/span>(<\/span>event<\/span>:<\/span> any<\/span>):<\/span> void<\/span> {<\/span>\r\n    this<\/span>.<\/span>imageChangedEvent<\/span> =<\/span> event<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  applyIcon<\/span>():<\/span> void<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Cropped Image!<\/span>'<\/span>,<\/span> this<\/span>.<\/span>croppedImage<\/span>);<\/span>\r\n  }<\/span>\r\n\r\n  resetImage<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>scale<\/span> =<\/span> 1<\/span>;<\/span>\r\n    this<\/span>.<\/span>rotation<\/span> =<\/span> 0<\/span>;<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {};<\/span>\r\n    this<\/span>.<\/span>_resetCropperPosition<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  imageCropped<\/span>(<\/span>event<\/span>:<\/span> ImageCroppedEvent<\/span>)<\/span> {<\/span>\r\n    this<\/span>.<\/span>croppedImage<\/span> =<\/span> base64ToFile<\/span>(<\/span>event<\/span>.<\/span>base64<\/span>);<\/span>\r\n    \/\/ or if you want to save as base64<\/span>\r\n    \/\/ this.croppedImage = base64ToFile(event.base64);<\/span>\r\n  }<\/span>\r\n\r\n  imageLoaded<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>showCropper<\/span> =<\/span> true<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  rotateLeft<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>rotation<\/span>--<\/span>;<\/span>\r\n    this<\/span>.<\/span>_flipAfterRotate<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  rotateRight<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>rotation<\/span>++<\/span>;<\/span>\r\n    this<\/span>.<\/span>_flipAfterRotate<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  flipHorizontal<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>transform<\/span>,<\/span>\r\n      flipH<\/span>:<\/span> !<\/span>this<\/span>.<\/span>transform<\/span>.<\/span>flipH<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  flipVertical<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>transform<\/span>,<\/span>\r\n      flipV<\/span>:<\/span> !<\/span>this<\/span>.<\/span>transform<\/span>.<\/span>flipV<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  changeScale<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\r\n    this<\/span>.<\/span>scale<\/span> =<\/span> e<\/span>.<\/span>value<\/span>;<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>transform<\/span>,<\/span>\r\n      scale<\/span>:<\/span> this<\/span>.<\/span>scale<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  zoomOut<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>scale<\/span> -=<\/span> 0.1<\/span>;<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>transform<\/span>,<\/span>\r\n      scale<\/span>:<\/span> this<\/span>.<\/span>scale<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  zoomIn<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>scale<\/span> +=<\/span> 0.1<\/span>;<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>transform<\/span>,<\/span>\r\n      scale<\/span>:<\/span> this<\/span>.<\/span>scale<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  toggleContainWithinAspectRatio<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>containWithinAspectRatio<\/span> =<\/span> !<\/span>this<\/span>.<\/span>containWithinAspectRatio<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  closeEditIconDialog<\/span>():<\/span> void<\/span> {<\/span>\r\n    this<\/span>.<\/span>dialogRef<\/span>.<\/span>close<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  private<\/span> _flipAfterRotate<\/span>()<\/span> {<\/span>\r\n    const<\/span> flippedH<\/span> =<\/span> this<\/span>.<\/span>transform<\/span>.<\/span>flipH<\/span>;<\/span>\r\n    const<\/span> flippedV<\/span> =<\/span> this<\/span>.<\/span>transform<\/span>.<\/span>flipV<\/span>;<\/span>\r\n    this<\/span>.<\/span>transform<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>transform<\/span>,<\/span>\r\n      flipH<\/span>:<\/span> flippedV<\/span>,<\/span>\r\n      flipV<\/span>:<\/span> flippedH<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  private<\/span> _resetCropperPosition<\/span>():<\/span> void<\/span> {<\/span>\r\n    this<\/span>.<\/span>containWithinAspectRatio<\/span> =<\/span> false<\/span>;<\/span>\r\n    this<\/span>.<\/span>cd<\/span>.<\/span>detectChanges<\/span>();<\/span>\r\n    this<\/span>.<\/span>containWithinAspectRatio<\/span> =<\/span> true<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u56fe\u7247\u88c1\u526a\u5bf9\u8bdd\u6846.html<\/h4>\n
<ng-container>\r\n  <div class=\"mat-dialog-header\">\r\n    <div class=\"flex-start\">\r\n      <button mat-icon-button (click)=\"closeEditIconDialog()\">\r\n        <mat-icon>arrow_back<\/mat-icon>\r\n      <\/button>\r\n      <h1 mat-dialog-title class=\"mb-0\">Tim Icon<\/h1>\r\n    <\/div>\r\n\r\n    <div class=\"my-8 action-header flex-center\">\r\n      <button mat-icon-button (click)=\"rotateLeft()\">\r\n        <mat-icon>rotate_left<\/mat-icon>\r\n      <\/button>\r\n      <button mat-icon-button (click)=\"rotateRight()\">\r\n        <mat-icon>rotate_right<\/mat-icon>\r\n      <\/button>\r\n      <button mat-icon-button (click)=\"flipHorizontal()\">\r\n        <mat-icon>swap_horiz<\/mat-icon>\r\n      <\/button>\r\n      <button mat-icon-button (click)=\"flipVertical()\">\r\n        <mat-icon>sync<\/mat-icon>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <mat-dialog-content>\r\n    <image-cropper\r\n      [imageChangedEvent]=\"imageChangedEvent\"\r\n      [maintainAspectRatio]=\"true\"\r\n      [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n      [aspectRatio]=\"1\"\r\n      [resizeToWidth]=\"256\"\r\n      [cropperMinWidth]=\"128\"\r\n      [onlyScaleDown]=\"true\"\r\n      [roundCropper]=\"false\"\r\n      [canvasRotation]=\"rotation\"\r\n      [transform]=\"transform\"\r\n      [alignImage]=\"'center'\"\r\n      [style.display]=\"showCropper ? null : 'none'\"\r\n      format=\"png\"\r\n      (imageCropped)=\"imageCropped($event)\"\r\n      (imageLoaded)=\"imageLoaded()\"\r\n    ><\/image-cropper>\r\n  <\/mat-dialog-content>\r\n\r\n  <div class=\"flex-center\">\r\n    <button mat-icon-button (click)=\"zoomOut()\">\r\n      <mat-icon>zoom_out<\/mat-icon>\r\n    <\/button>\r\n    <mat-slider\r\n      step=\"0.1\"\r\n      min=\"1\"\r\n      max=\"2\"\r\n      [value]=\"scale\"\r\n      (change)=\"changeScale($event)\"\r\n    ><\/mat-slider>\r\n    <button mat-icon-button (click)=\"zoomIn()\">\r\n      <mat-icon>zoom_in<\/mat-icon>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <mat-dialog-actions class=\"flex-end\">\r\n    <button mat-button (click)=\"resetImage()\">Reset<\/button>\r\n    <button mat-button color=\"accent\" (click)=\"applyIcon()\">Apply<\/button>\r\n  <\/mat-dialog-actions>\r\n<\/ng-container>\r\n<\/code><\/pre>\n
\u56fe\u50cf\u88c1\u526a\u5bf9\u8bdd\u6846.scss<\/h4>\n
:host {\r\n  .flex-start {\r\n    display: flex;\r\n    justify-content: start;\r\n    text-align: center;\r\n  }\r\n\r\n  .flex-center {\r\n    display: flex;\r\n    justify-content: center;\r\n    text-align: center;\r\n  }\r\n\r\n  .flex-end {\r\n    display: flex;\r\n    justify-content: end;\r\n    text-align: center;\r\n  }\r\n\r\n  .action-header {\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .mat-dialog-content {\r\n    .cropper-container {\r\n      width: 100%;\r\n      margin: 0 auto;\r\n    }\r\n  }\r\n\r\n  img {\r\n    width: 600px;\r\n  }\r\n}\r\n\r\n::ng-deep .ngx-ic-move {\r\n  border-radius: 50%;\r\n  outline: 1px solid #888;\r\n}\r\n<\/code><\/pre>\n
\u4f7f\u7528\u526a\u88c1\u5668\u7ec4\u4ef6\uff08\u4f8b\u5982\uff1aapp.component\uff09<\/h3>\n
app.component.ts \u7684\u539f\u56e0\u662f\u5904\u7406\u7ec4\u4ef6\u7684\u903b\u8f91\u548c\u529f\u80fd\u3002<\/h4>\n
import { Component } from '@angular\/core';\r\nimport { MatDialog } from '@angular\/material\/dialog';\r\nimport { ImageCropperDialog } from '.\/image-cropper-dialog\/image-cropper-dialog';\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css'],\r\n})\r\nexport class AppComponent {\r\n  constructor(private readonly dialog: MatDialog) {}\r\n\r\n  fileChangeEvent(event: any): void {\r\n    this.dialog.open(ImageCropperDialog, {\r\n      width: '600px',\r\n      data: event,\r\n    });\r\n  }\r\n}\r\n<\/code><\/pre>\n
\u5e94\u7528\u7a0b\u5e8f.component.html<\/h4>\n
<input type=\"file\" (change)=\"fileChangeEvent($event)\" \/>\r\n<\/code><\/pre>\n
\u5e94\u7528\u7a0b\u5e8f.module.ts<\/h3>\n
\u5bfc\u5165\u6a21\u5757<\/p>\n
import { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { AppComponent } from '.\/app.component';\r\n+ import { ImageCropperModule } from 'ngx-image-cropper';\r\n+ import { ImageCropperDialog } from '.\/image-cropper-dialog\/image-cropper-dialog';\r\n+ import { MatButtonModule } from '@angular\/material\/button';\r\n+ import { MatIconModule } from '@angular\/material\/icon';\r\n+ import { MatDialogModule } from '@angular\/material\/dialog';\r\n+ import { MatSliderModule } from '@angular\/material\/slider';\r\n+ import { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\r\n\r\n@NgModule({\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n\r\n+   MatButtonModule,\r\n+   MatIconModule,\r\n+   MatDialogModule,\r\n+   MatSliderModule,\r\n+   ImageCropperModule,\r\n\r\n+   BrowserAnimationsModule,\r\n  ],\r\n  declarations: [\r\n    AppComponent,\r\n+   ImageCropperDialog\r\n  ],\r\n  bootstrap: [AppComponent],\r\n+ entryComponents: [ImageCropperDialog],\r\n})\r\nexport class AppModule {}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5f15\u8a00 \u5728\u672c\u6587\u4e2d\uff0c\u521b\u5efa\u50cf\u8fd9\u91cc\u4e00\u6837\u7684\u526a\u88c1\u56fe\u6807\u5bf9\u8bdd\u6846\u3002 \u8fd9\u91cc\u6709\u4e00\u4e2a\u4f8b\u5b50\u3002   \u5b89\u88c5\u8f6f\u4ef6\u5305 \u5b89\u88c5@angul […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39331","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010angular\u3011\u4f7f\u7528material-design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807\" \/>\n<meta property=\"og:description\" content=\"\u5f15\u8a00 \u5728\u672c\u6587\u4e2d\uff0c\u521b\u5efa\u50cf\u8fd9\u91cc\u4e00\u6837\u7684\u526a\u88c1\u56fe\u6807\u5bf9\u8bdd\u6846\u3002 \u8fd9\u91cc\u6709\u4e00\u4e2a\u4f8b\u5b50\u3002   \u5b89\u88c5\u8f6f\u4ef6\u5305 \u5b89\u88c5@angul […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010angular\u3011\u4f7f\u7528material-design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-21T17:51:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T01:49:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d397037434c4406c79ab8\/2-0.png\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/\",\"name\":\"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-03-21T17:51:35+00:00\",\"dateModified\":\"2024-05-04T01:49:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010angular\u3011\u4f7f\u7528material-design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807","og_description":"\u5f15\u8a00 \u5728\u672c\u6587\u4e2d\uff0c\u521b\u5efa\u50cf\u8fd9\u91cc\u4e00\u6837\u7684\u526a\u88c1\u56fe\u6807\u5bf9\u8bdd\u6846\u3002 \u8fd9\u91cc\u6709\u4e00\u4e2a\u4f8b\u5b50\u3002   \u5b89\u88c5\u8f6f\u4ef6\u5305 \u5b89\u88c5@angul […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010angular\u3011\u4f7f\u7528material-design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-03-21T17:51:35+00:00","article_modified_time":"2024-05-04T01:49:13+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d397037434c4406c79ab8\/2-0.png"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/","name":"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-03-21T17:51:35+00:00","dateModified":"2024-05-04T01:49:13+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010Angular\u3011\u4f7f\u7528Material Design\u7684\u56fe\u50cf\u88c1\u526a\u5668\u4fee\u526a\u56fe\u6807"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular%e3%80%91%e4%bd%bf%e7%94%a8material-design%e7%9a%84%e5%9b%be%e5%83%8f%e8%a3%81%e5%89%aa%e5%99%a8%e4%bf%ae%e5%89%aa%e5%9b%be%e6%a0%87\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39331"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39331\/revisions"}],"predecessor-version":[{"id":97599,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39331\/revisions\/97599"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}