{"id":39512,"date":"2023-04-04T11:37:09","date_gmt":"2023-07-01T19:05:57","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/"},"modified":"2024-04-29T21:51:30","modified_gmt":"2024-04-29T13:51:30","slug":"%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","title":{"rendered":"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"<h2>\u9996\u5148<\/h2>\n<p>\u7531\u4e8e\u6211\u60f3\u4f53\u9a8cAngular7\u7684\u62d6\u653e\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u5148\u5728ToDo\u5e94\u7528\u4e2d\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u3002\u62d6\u653e\u529f\u80fd\u662f\u901a\u8fc7CDK\u63d0\u4f9b\u7684\uff0c\u6211\u5c06\u4f7f\u7528\u5b83\u3002\u5b98\u65b9\u6587\u6863\u53ef\u4ee5\u5728https:\/\/material.angular.io\/\u627e\u5230\u3002<\/p>\n<h2>\u6267\u884c\u73af\u5883 zu\u00f2<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Angular7<\/ul>\n<\/li>\n<\/ul>\n<p>Angular6\u4ee5\u524d\u306e\u5834\u5408\u306fupdate\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n<h2>\u8fd9\u7bc7\u6587\u7ae0\u7684\u5185\u5bb9 (Zh\u00e8 de<\/h2>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u521b\u5efa\u9879\u76ee<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u57fa\u672c\u914d\u7f6e<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u5b9e\u73b0ToDo\u529f\u80fd<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u603b\u7ed3<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\u53c2\u8003\u8d44\u6599<\/ol>\n<h2>\u521b\u5efa\u9879\u76ee<\/h2>\n<p>\u4f7f\u7528 Angular CLI \u521b\u5efa\u9879\u76ee\u3002<br \/>\n\u7531\u4e8e\u8fd9\u6b21\u53ea\u9700\u8981\u6700\u5c0f\u914d\u7f6e\uff0c\u6240\u4ee5\u5728\u9009\u9879\u4e2d\u52a0\u4e0a minimal\u3002<br \/>\n\u5e76\u4e14\u5c06\u5e94\u7528\u540d\u79f0\u8bbe\u4e3a todo-app\u3002<\/p>\n<pre class=\"post-pre\"><code>ng new todo-app --minimal\r\n<\/code><\/pre>\n<h3>\u5b89\u88c5 Angular Material CDK \u548c Animation\u3002<\/h3>\n<pre class=\"post-pre\"><code>npm install --save @angular\/material @angular\/cdk @angular\/animations\r\n<\/code><\/pre>\n<h3>\u901a\u8fc7\u4f7f\u7528ng add\u6765\u8bbe\u7f6eAngularMaterial\u3002<\/h3>\n<p>ng add\u7684\u4f5c\u7528\u662f\u8bbe\u7f6eAngularMaterial\u7684\u5b89\u88c5\u3002<\/p>\n<p>\u4f7f\u7528`ng add `\u547d\u4ee4\u6765\u6307\u5b9a\u5305\uff0c\u5e76\u4f7f\u7528Schematics\u529f\u80fd\u6765\u5c55\u5f00\u6a21\u677f\u3002<\/p>\n<pre class=\"post-pre\"><code>ng add @angular\/material\r\n<\/code><\/pre>\n<p>\u6682\u65f6\u786e\u8ba4\u542f\u52a8<\/p>\n<pre class=\"post-pre\"><code>ng serve -o\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3aae37434c4406c7eda6\/16-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2018-12-09 21.30.48.png\" \/><\/div>\n<h2>\u57fa\u672c\u6784\u6210 &#8211;<\/h2>\n<p>\u7531\u4e8e\u8fd9\u662f\u4e00\u4e2a\u5c0f\u578b\u5e94\u7528\u7a0b\u5e8f\uff0c\u6211\u4eec\u5c06\u76f4\u63a5\u5728app.component.ts\u548capp.component.ts\u4e2d\u7f16\u5199\u5904\u7406\u4ee3\u7801\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u5728app.component.ts\u4e2d\u6dfb\u52a0OnInit\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-root<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<h2>\u5b9e\u73b0\u5f85\u529e\u4e8b\u9879\u529f\u80fd<\/h2>\n<p>\u5728app.module.ts\u4e2d\u5bfc\u5165material\u6a21\u5757\uff0c\u987a\u4fbf\u5bfc\u5165ReactiveFormsModule\u4ee5\u4fbf\u8fdb\u884cToDo\u7684\u8f93\u5165\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ReactiveFormsModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/forms<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u5165\u529b\u30d5\u30a9\u30fc\u30e0\u7528\u306e\u30e2\u30b8\u30e5\u30fc\u30eb<\/span>\r\n\r\n<span class=\"cm\">\/* \u4eca\u56de\u4f7f\u3046material\u306e\u30e2\u30b8\u30e5\u30fc\u30eb *\/<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserAnimationsModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser\/animations<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MatButtonModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/material<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MatInputModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/material\/input<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">DragDropModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/cdk\/drag-drop<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MatCardModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/material\/card<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">AppComponent<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">BrowserModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">BrowserAnimationsModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">MatButtonModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">MatInputModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">ReactiveFormsModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">MatCardModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">DragDropModule<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span>\r\n  <span class=\"na\">bootstrap<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<h3>\u6211\u5c06\u521b\u5efa\u4e00\u4e2a\u5f85\u529e\u4e8b\u9879\u5217\u8868\u7684\u8f93\u5165\u680f\u3002<\/h3>\n<p>\u5c06app.component.html\u4e2d\u7684\u5185\u5bb9\u66ff\u6362\u4e3a\u4ee5\u4e0b\u6e90\u4ee3\u7801\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;div&gt;<\/span>\r\n  <span class=\"nt\">&lt;form<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-form\"<\/span> <span class=\"na\">[formGroup]=<\/span><span class=\"s\">\"myForm\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;mat-form-field<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-full-width\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;input<\/span> <span class=\"na\">formControlName=<\/span><span class=\"s\">\"title\"<\/span> <span class=\"na\">matInput<\/span> <span class=\"na\">placeholder=<\/span><span class=\"s\">\"title\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/mat-form-field&gt;<\/span>\r\n\r\n    <span class=\"nt\">&lt;mat-form-field<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-full-width\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;textarea<\/span> <span class=\"na\">formControlName=<\/span><span class=\"s\">\"description\"<\/span> <span class=\"na\">matInput<\/span> <span class=\"na\">placeholder=<\/span><span class=\"s\">\"description\"<\/span><span class=\"nt\">&gt;&lt;\/textarea&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/mat-form-field&gt;<\/span>\r\n    <span class=\"nt\">&lt;button<\/span> <span class=\"na\">mat-raised-button<\/span> <span class=\"na\">color=<\/span><span class=\"s\">\"primary\"<\/span><span class=\"nt\">&gt;<\/span>\u767b\u9332<span class=\"nt\">&lt;\/button&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/form&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u5728app.component.ts\u4e2d\u7f16\u5199\u8f93\u5165\u8868\u5355\u7684\u5904\u7406\u4ee3\u7801\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FormBuilder<\/span><span class=\"p\">,<\/span> <span class=\"nx\">FormGroup<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Validators<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/forms<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-root<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">formBuilder<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormBuilder<\/span><span class=\"p\">,<\/span> <span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n  <span class=\"nl\">myForm<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormGroup<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"nx\">todo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n  <span class=\"nx\">done<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">formBuilder<\/span><span class=\"p\">.<\/span><span class=\"nx\">group<\/span><span class=\"p\">({<\/span>\r\n      <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">Validators<\/span><span class=\"p\">.<\/span><span class=\"nx\">required<\/span><span class=\"p\">]],<\/span>\r\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">Validators<\/span><span class=\"p\">.<\/span><span class=\"nx\">required<\/span><span class=\"p\">]]<\/span>\r\n    <span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">taskRegist<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">({<\/span>\r\n      <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span><span class=\"p\">.<\/span><span class=\"nx\">controls<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span><span class=\"p\">.<\/span><span class=\"nx\">controls<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u6211\u4f1a\u6253\u5f00\u5e94\u7528\u7a0b\u5e8f\u6765\u786e\u8ba4\u8fc4\u4eca\u4e3a\u6b62\u7684\u7ed3\u679c\u3002<\/p>\n<pre class=\"post-pre\"><code>ng serve -o\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3aae37434c4406c7eda6\/30-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2018-12-10 21.27.30.png\" \/><\/div>\n<h3>\u4f7f\u7528\u62d6\u653e\u529f\u80fd\uff0c\u4f7f\u8f93\u5165\u8868\u5355\u53ef\u4ee5\u81ea\u7531\u79fb\u52a8\u3002<\/h3>\n<p>\u4f7f\u7528cdkDrag\u6307\u4ee4\u4e3a\u5148\u524d\u521b\u5efa\u7684\u8f93\u5165\u8868\u5355\u6dfb\u52a0\u4e00\u4e2a\u5305\u56f4\u7684div\u3002\u8fd9\u6837\u4e00\u6765\uff0c\u8f93\u5165\u8868\u5355\u5c31\u53ef\u4ee5\u5728\u5c4f\u5e55\u4e0a\u81ea\u7531\u79fb\u52a8\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"input-box\"<\/span> <span class=\"na\">cdkDrag<\/span><span class=\"nt\">&gt;<\/span> <span class=\"c\">&lt;!-- \u2190\u8ffd\u52a0\u90e8\u5206 --&gt;<\/span>\r\n    <span class=\"nt\">&lt;form<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"input-form\"<\/span> <span class=\"na\">[formGroup]=<\/span><span class=\"s\">\"myForm\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;mat-form-field<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-full-width\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;input<\/span> <span class=\"na\">formControlName=<\/span><span class=\"s\">\"title\"<\/span> <span class=\"na\">matInput<\/span> <span class=\"na\">placeholder=<\/span><span class=\"s\">\"\u30bf\u30a4\u30c8\u30eb\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/mat-form-field&gt;<\/span>\r\n\r\n      <span class=\"nt\">&lt;mat-form-field<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-full-width\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;textarea<\/span> <span class=\"na\">formControlName=<\/span><span class=\"s\">\"description\"<\/span> <span class=\"na\">matInput<\/span> <span class=\"na\">placeholder=<\/span><span class=\"s\">\"\u8aac\u660e\u3092\u5165\u529b\"<\/span><span class=\"nt\">&gt;&lt;\/textarea&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/mat-form-field&gt;<\/span>\r\n      <span class=\"nt\">&lt;button<\/span> <span class=\"na\">mat-raised-button<\/span> <span class=\"na\">color=<\/span><span class=\"s\">\"primary\"<\/span> <span class=\"na\">(click)=<\/span><span class=\"s\">\"taskRegist()\"<\/span> <span class=\"na\">[disabled]=<\/span><span class=\"s\">\"myForm.invalid\"<\/span><span class=\"nt\">&gt;<\/span>\u767b\u9332<span class=\"nt\">&lt;\/button&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/form&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span> <span class=\"c\">&lt;!-- \u2190\u8ffd\u52a0\u90e8\u5206 --&gt;<\/span>\r\n<\/code><\/pre>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30c9\u30e9\u30c3\u30b0\u3092\u53ef\u80fd\u306b\u3059\u308b\u306b\u306fcdkDrag\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u30bf\u30b0\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002\u3053\u308c\u3060\u3051\u3067\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>cdkDrag\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u307f\u4ed8\u52a0\u3057\u305f\u5834\u5408\u306f\u30da\u30fc\u30b8\u5185\u3092\u81ea\u7531\u306b\u52d5\u304b\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u5f53\u8bbe\u8ba1\u5b8c\u6210\u540e\uff0c\u5c06\u5f00\u59cb\u6267\u884c\u3002<br \/>\nCSS\u53c2\u8003\u4e86Angular Material\u7684\u5b98\u65b9\u6587\u6863\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nc\">.input-form<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90%<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n<span class=\"nc\">.example-full-width<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90%<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"nc\">.input-box<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">1px<\/span> <span class=\"m\">#ccc<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.87<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"n\">move<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">z-index<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">box-shadow<\/span> <span class=\"m\">200ms<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">1px<\/span> <span class=\"m\">-2px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">),<\/span>\r\n                <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">0<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.14<\/span><span class=\"p\">),<\/span>\r\n                <span class=\"m\">0<\/span> <span class=\"m\">1px<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">0<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.12<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6253\u5f00\u5e94\u7528\u5e76\u786e\u8ba4<\/p>\n<pre class=\"post-pre\"><code>ng serve -o\r\n<\/code><\/pre>\n<p>\u6211\u8ba4\u4e3a\u60a8\u53ef\u4ee5\u786e\u8ba4\u8f93\u5165\u8868\u5355\u662f\u53ef\u4ee5\u88ab\u62d6\u52a8\u7684\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3aae37434c4406c7eda6\/40-0.gif\" alt=\"drag.gif\" \/><\/div>\n<h3>\u521b\u5efa\u4e00\u4e2a\u5f85\u529e\u4e8b\u9879\u6e05\u5355<\/h3>\n<p>\u8bf7\u5728\u5148\u524d\u521b\u5efa\u7684\u8f93\u5165\u8868\u5355\u4e0b\u65b9\u8fdb\u884c\u6dfb\u52a0\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-container\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;h2&gt;<\/span>\u3084\u308b\u3053\u3068<span class=\"nt\">&lt;\/h2&gt;<\/span>\r\n\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">cdkDropList<\/span> <span class=\"na\">#todoList<\/span><span class=\"err\">=\"<\/span><span class=\"na\">cdkDropList<\/span><span class=\"err\">\"<\/span> <span class=\"na\">[cdkDropListData]=<\/span><span class=\"s\">\"todo\"<\/span> <span class=\"na\">[cdkDropListConnectedTo]=<\/span><span class=\"s\">\"[doneList]\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-list\"<\/span>\r\n    <span class=\"na\">(cdkDropListDropped)=<\/span><span class=\"s\">\"drop($event)\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-box\"<\/span> <span class=\"na\">[cdkDragData]=<\/span><span class=\"s\">\"item\"<\/span> <span class=\"na\">*ngFor=<\/span><span class=\"s\">\"let item of todo\"<\/span> <span class=\"na\">cdkDrag<\/span><span class=\"nt\">&gt;<\/span>\r\n      {{item.title}}\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">*cdkDragPreview<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;mat-card<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-card\"<\/span><span class=\"nt\">&gt;<\/span>\r\n          <span class=\"nt\">&lt;mat-card-content&gt;<\/span>\r\n            <span class=\"nt\">&lt;div&gt;<\/span>{{item.title}}<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n            <span class=\"nt\">&lt;hr&gt;<\/span>\r\n            <span class=\"nt\">&lt;p&gt;<\/span>{{item.description}}<span class=\"nt\">&lt;\/p&gt;<\/span>\r\n          <span class=\"nt\">&lt;\/mat-card-content&gt;<\/span>\r\n        <span class=\"nt\">&lt;\/mat-card&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-container\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;h2&gt;<\/span>\u5b8c\u4e86<span class=\"nt\">&lt;\/h2&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">cdkDropList<\/span> <span class=\"na\">#doneList<\/span><span class=\"err\">=\"<\/span><span class=\"na\">cdkDropList<\/span><span class=\"err\">\"<\/span> <span class=\"na\">[cdkDropListData]=<\/span><span class=\"s\">\"done\"<\/span> <span class=\"na\">[cdkDropListConnectedTo]=<\/span><span class=\"s\">\"[todoList]\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-list\"<\/span>\r\n    <span class=\"na\">(cdkDropListDropped)=<\/span><span class=\"s\">\"drop($event)\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"example-box\"<\/span> <span class=\"na\">[cdkDragData]=<\/span><span class=\"s\">\"item\"<\/span> <span class=\"na\">*ngFor=<\/span><span class=\"s\">\"let item of done\"<\/span> <span class=\"na\">cdkDrag<\/span><span class=\"nt\">&gt;<\/span>{{item.title}}<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u5141\u8bb8\u8f93\u5165\u8868\u5355\u5728\u5c4f\u5e55\u5185\u81ea\u7531\u79fb\u52a8\uff0c\u4f46\u6211\u4eec\u5e0c\u671b\u5bf9ToDo\u5217\u8868\u8fdb\u884c\u6392\u5e8f\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u4f7f\u7528cdkDropList\u3002<br \/>\ncdkDropList\u53ef\u4ee5\u9650\u5236\u653e\u7f6e\u4f4d\u7f6e\u3002\u8fd9\u6837\u4e00\u6765\uff0ccdkDropList\u5185\u7684\u5143\u7d20\u5c06\u81ea\u52a8\u6392\u5e8f\u3002<\/p>\n<pre class=\"post-pre\"><code>#&lt;id\u540d&gt;=\"cdkDropList\"\r\n<\/code><\/pre>\n<p>\u8fd9\u6b21\u6211\u4eec\u8fd8\u4f7f\u7528\u4e86cdkDropListData\u3001cdkDropListDropped\u548ccdkDropListConnectedTo\u7b49\u5176\u4ed6\u9009\u9879\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">cdkDragData\u3000\u3001cdkDropListData<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">cdkDragData\u306b\u5024\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u8981\u7d20\u306b\u30c7\u30fc\u30bf\u3092\u3082\u305f\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u4eca\u56de\u306e\u30a2\u30d7\u30ea\u306e\u5834\u5408\u306fdrop\u30a4\u30d9\u30f3\u30c8\u306eevent.item.data\u3067\u30c7\u30fc\u30bf\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u307e\u305f\u30c7\u30fc\u30bf\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u30c9\u30ed\u30c3\u30d7\u64cd\u4f5c\u306e\u767a\u751f\u5143\u3092\u7279\u5b9a\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">cdkDropListDropped<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30e6\u30fc\u30b6\u30fc\u304c\u30c9\u30e9\u30c3\u30b0\u3092\u7d42\u4e86\u3059\u308b\u3068\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002\u307e\u305f\u30c9\u30e9\u30c3\u30b0\u4e2d\u306f\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3092\u66f4\u65b0\u3057\u307e\u305b\u3093\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">cdkDropListConnectedTo<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">[cdkDropListConnectedTo]=&#8221;[id\u540d]&#8221;\u3067\u30c9\u30ed\u30c3\u30d7\u5148\u306e\u30b3\u30f3\u30c6\u30ca\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30c9\u30ed\u30c3\u30d7\u5148\u3092\u5236\u9650\u3057\u305f\u3044\u3068\u304d\u306b\u4f7f\u7528\u3059\u308b\u611f\u3058\u3067\u3059\u306d\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u307e\u305fcdkDropListGroup\u914d\u4e0b\u3067cdkDropListConnectedTo\u3092\u8a2d\u5b9a\u3057\u306a\u3044\u5834\u5408\u306f\u597d\u304d\u306a\u30b3\u30f3\u30c6\u30ca\u306b\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">cdkDragPreview<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">cdkDragPreview\u3092\u4ed8\u52a0\u3059\u308b\u3053\u3068\u3067\u30c9\u30e9\u30c3\u30b0\u6642\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/ul>\n<p>\u5728app.component.ts\u4e2d\u65b0\u589e\u4e00\u4e2a\u65b9\u6cd5\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FormBuilder<\/span><span class=\"p\">,<\/span> <span class=\"nx\">FormGroup<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Validators<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/forms<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CdkDragDrop<\/span><span class=\"p\">,<\/span> <span class=\"nx\">moveItemInArray<\/span><span class=\"p\">,<\/span> <span class=\"nx\">transferArrayItem<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/cdk\/drag-drop<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/\u3000&lt;------------\u8ffd\u52a0<\/span>\r\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-root<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">formBuilder<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormBuilder<\/span><span class=\"p\">,<\/span> <span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">todo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n  <span class=\"nx\">done<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n  <span class=\"nl\">myForm<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormGroup<\/span><span class=\"p\">;<\/span>\r\n\r\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">formBuilder<\/span><span class=\"p\">.<\/span><span class=\"nx\">group<\/span><span class=\"p\">({<\/span>\r\n      <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">Validators<\/span><span class=\"p\">.<\/span><span class=\"nx\">required<\/span><span class=\"p\">]],<\/span>\r\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">Validators<\/span><span class=\"p\">.<\/span><span class=\"nx\">required<\/span><span class=\"p\">]]<\/span>\r\n    <span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"cm\">\/*--------------\u4ee5\u4e0b\u8ffd\u52a0\u5206----------------------*\/<\/span>\r\n<span class=\"cm\">\/*\r\n * \u30c9\u30ed\u30c3\u30d7\u3057\u305fcdkDropList\u304c\u540c\u3058\u306a\u3089\u5834\u6240\u3092\u5165\u308c\u66ff\u3048\u307e\u3059\r\n * cdkDropList\u304c\u9055\u3046\u5834\u5408\u306f\u30a2\u30a4\u30c6\u30e0\u3092\u79fb\u3057\u307e\u3059\r\n *\/<\/span>\r\n  <span class=\"nx\">drop<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CdkDragDrop<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">previousContainer<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">moveItemInArray<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">previousIndex<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">currentIndex<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">transferArrayItem<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">previousContainer<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">previousIndex<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">currentIndex<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"cm\">\/*--------------------------------------*\/<\/span><span class=\"err\">\u3000<\/span>\r\n\r\n<span class=\"cm\">\/*\u30bf\u30b9\u30af\u767b\u9332\u7528\u306e\u30e1\u30bd\u30c3\u30c9*\/<\/span>\r\n  <span class=\"nx\">taskRegist<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">({<\/span>\r\n      <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span><span class=\"p\">.<\/span><span class=\"nx\">controls<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">myForm<\/span><span class=\"p\">.<\/span><span class=\"nx\">controls<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n<span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">moveItemInArray<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u540c\u3058\u30b3\u30f3\u30c6\u30ca\u5185\u3067\u8981\u7d20\u306e\u5834\u6240\u3092\u5165\u308c\u66ff\u3048\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">transferArrayItem<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30bf\u30fc\u30b2\u30c3\u30c8\u306e\u30b3\u30f3\u30c6\u30ca\u306b\u8981\u7d20\u3092\u79fb\u52d5\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">copyArrayItem<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u4eca\u56de\u306f\u4f7f\u7528\u3057\u3066\u3044\u307e\u305b\u3093\u304c\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u306e\u30b3\u30f3\u30c6\u30ca\u306b\u8981\u7d20\u3092\u30b3\u30d4\u30fc\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3082\u3042\u308b\u305d\u3046\u3067\u3059<\/ul>\n<p>\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u529f\u80fd\u7684\u5b9e\u73b0\u5df2\u7ecf\u5b8c\u6210\u3002\u63a5\u4e0b\u6765\u53ea\u9700\u8981\u8c03\u6574\u5e03\u5c40\u3002<br \/>\n\u5c06\u524d\u9762\u521b\u5efa\u7684CSS\u8fdb\u884c\u9644\u52a0\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nc\">.example-card<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">400px<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"nc\">.example-container<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">400px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">25px<\/span> <span class=\"m\">25px<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">inline-block<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">vertical-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">top<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.example-list<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">1px<\/span> <span class=\"m\">#ccc<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">min-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">60px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">block<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.example-box<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">1px<\/span> <span class=\"m\">#ccc<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.87<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">row<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"n\">space-between<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"n\">move<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">14px<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.cdk-drag-preview<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">-3px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">),<\/span>\r\n                <span class=\"m\">0<\/span> <span class=\"m\">8px<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">1px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.14<\/span><span class=\"p\">),<\/span>\r\n                <span class=\"m\">0<\/span> <span class=\"m\">3px<\/span> <span class=\"m\">14px<\/span> <span class=\"m\">2px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.12<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.cdk-drag-placeholder<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.cdk-drag-animating<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">250ms<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.example-box<\/span><span class=\"nd\">:last-child<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nc\">.example-list.cdk-drop-list-dragging<\/span> <span class=\"nc\">.example-box<\/span><span class=\"nd\">:not<\/span><span class=\"o\">(<\/span><span class=\"nc\">.cdk-drag-placeholder<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">250ms<\/span> <span class=\"n\">cubic-bezier<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.2<\/span><span class=\"p\">,<\/span> <span class=\"m\">1<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6253\u5f00\u5e94\u7528\u7a0b\u5e8f\u5e76\u786e\u8ba4<\/p>\n<pre class=\"post-pre\"><code>ng serve -o\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3aae37434c4406c7eda6\/55-0.gif\" alt=\"\u30de\u30a4\u30e0\u30fc\u30d2\u3099\u30fc.mov.gif\" \/><\/div>\n<h2>\u603b\u7ed3<\/h2>\n<p>\u6211\u5bf9\u80fd\u591f\u8f7b\u677e\u5b9e\u73b0\u62d6\u653e\u529f\u80fd\u611f\u5230\u60ca\u8bb6\uff0c\u6bd4\u6211\u60f3\u8c61\u4e2d\u8981\u7b80\u5355\u5f97\u591a\u3002<br \/>\n\u7531\u4e8eAngular 7\u7684\u5347\u7ea7\u8fd8\u6dfb\u52a0\u4e86\u5176\u4ed6\u529f\u80fd\uff0c\u6211\u4e5f\u60f3\u53bb\u8bd5\u8bd5\u3002<br \/>\n\u975e\u5e38\u611f\u8c22\u60a8\u9605\u8bfb\u5230\u6700\u540e\u3002<\/p>\n<h2>\u6587\u732e\u5f15\u7528<\/h2>\n<p>Angular Material \u662f\u4e00\u79cd\u7528\u4e8e Angular \u6846\u67b6\u7684 UI \u7ec4\u4ef6\u5e93\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u5148 \u7531\u4e8e\u6211\u60f3\u4f53\u9a8cAngular7\u7684\u62d6\u653e\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u5148\u5728ToDo\u5e94\u7528\u4e2d\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u3002\u62d6\u653e\u529f\u80fd\u662f\u901a\u8fc7CDK\u63d0\u4f9b\u7684\uff0c [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39512","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f - 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\/\u4f7f\u7528angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2atodo\u5e94\u7528\u7a0b\u5e8f\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u7531\u4e8e\u6211\u60f3\u4f53\u9a8cAngular7\u7684\u62d6\u653e\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u5148\u5728ToDo\u5e94\u7528\u4e2d\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u3002\u62d6\u653e\u529f\u80fd\u662f\u901a\u8fc7CDK\u63d0\u4f9b\u7684\uff0c [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2atodo\u5e94\u7528\u7a0b\u5e8f\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-01T19:05:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T13:51:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3aae37434c4406c7eda6\/16-0.png\" \/>\n<meta name=\"author\" content=\"\u97f5, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u97f5, \u79d1\" \/>\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\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\",\"name\":\"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-01T19:05:57+00:00\",\"dateModified\":\"2024-04-29T13:51:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f\"}]},{\"@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\/6530331a63adef3b3443a1fab53a0e6e\",\"name\":\"\u97f5, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"caption\":\"\u97f5, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f - 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\/\u4f7f\u7528angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2atodo\u5e94\u7528\u7a0b\u5e8f\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f","og_description":"\u9996\u5148 \u7531\u4e8e\u6211\u60f3\u4f53\u9a8cAngular7\u7684\u62d6\u653e\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u5148\u5728ToDo\u5e94\u7528\u4e2d\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u3002\u62d6\u653e\u529f\u80fd\u662f\u901a\u8fc7CDK\u63d0\u4f9b\u7684\uff0c [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2atodo\u5e94\u7528\u7a0b\u5e8f\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-01T19:05:57+00:00","article_modified_time":"2024-04-29T13:51:30+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3aae37434c4406c7eda6\/16-0.png"}],"author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","name":"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-01T19:05:57+00:00","dateModified":"2024-04-29T13:51:30+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Angular7\u7684\u62d6\u653e\u529f\u80fd\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528\u7a0b\u5e8f"}]},{"@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\/6530331a63adef3b3443a1fab53a0e6e","name":"\u97f5, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","caption":"\u97f5, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular7%e7%9a%84%e6%8b%96%e6%94%be%e5%8a%9f%e8%83%bd%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aatodo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39512","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39512"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39512\/revisions"}],"predecessor-version":[{"id":87850,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39512\/revisions\/87850"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}