{"id":39186,"date":"2023-07-30T08:04:39","date_gmt":"2022-12-26T02:20:20","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/"},"modified":"2024-04-30T16:04:22","modified_gmt":"2024-04-30T08:04:22","slug":"%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/","title":{"rendered":"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u7684\u6458\u8981<\/h2>\n

\u6309\u7167\u5bb9\u5668\uff08\u667a\u80fd\uff09\u7ec4\u4ef6\u548c\u5c55\u793a\u6027\u7ec4\u4ef6\u7684\u6982\u5ff5\uff0c\u521b\u5efa\u4e00\u4e2a\u6309\u7167\u7ec4\u4ef6\u65b9\u5f0f\u5206\u5272\u7684\u641c\u7d22\u5217\u8868\u754c\u9762\u3002<\/p>\n

\u5173\u4e8e\u5bb9\u5668\uff08\u667a\u80fd\uff09\u7ec4\u4ef6\u548c\u5448\u73b0\u7ec4\u4ef6<\/p>\n

\u8868\u5355\u662f\u4ee5\u6a21\u677f\u9a71\u52a8\u521b\u5efa\u7684\u3002<\/p>\n

\u5f62\u8c61<\/h3>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n

\u7248\u672c<\/h2>\n
\"<\/span>@angular-devkit\/schematics<\/span>\"<\/span>:<\/span> \"<\/span>^9.0.1<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/animations<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/cdk<\/span>\"<\/span>:<\/span> \"<\/span>^9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/common<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/compiler<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/core<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/forms<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/localize<\/span>\"<\/span>:<\/span> \"<\/span>^9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/platform-browser<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/platform-browser-dynamic<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/router<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular-devkit\/build-angular<\/span>\"<\/span>:<\/span> \"<\/span>~0.900.1<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/cli<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.1<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/compiler-cli<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>@angular\/language-service<\/span>\"<\/span>:<\/span> \"<\/span>~9.0.0<\/span>\"<\/span>,<\/span>\r\n\"<\/span>typescript<\/span>\"<\/span>:<\/span> \"<\/span>^3.7.5<\/span>\"<\/span>\r\n<\/code><\/pre>\n
\u6587\u4ef6\u5939\u7ed3\u6784\uff08\u6458\u8981\uff09<\/h2>\n
src\r\n\u2517app\r\n\u3000\u2523features\r\n\u3000\u2503 \u2517products\r\n\u3000\u2503 \u3000\u2523components\r\n\u3000\u2503 \u3000\u2503 \u2517search-products-form\r\n\u3000\u2503 \u3000\u2503\u3000 \u2517search-products-form.component.html\/scss\/spec.ts\/ts\r\n\u3000\u2503 \u3000\u2523pages\r\n\u3000\u2503 \u3000\u2503 \u2517product-list\r\n\u3000\u2503 \u3000\u2503\u3000 \u2523product-list.component.html\/scss\/spec.ts\/ts\r\n\u3000\u2503 \u3000\u2503\u3000 \u2517product-list.smart.component.ts\r\n\u3000\u2503 \u3000\u2523product.component.ts\r\n\u3000\u2503 \u3000\u2523products-routing.module.ts\r\n\u3000\u2503 \u3000\u2517products.module.ts\r\n\u3000\u2523app-routing.module.ts\r\n\u3000\u2523app.component.html\/scss\/spec.ts\/ts\r\n\u3000\u2517app.module.ts\r\n<\/code><\/pre>\n
\u5b9e\u65bd<\/h2>\n
\u6a21\u7279\u513f (M\u00f3 T\u00e8 \u00c9r)<\/h3>\n
\/**\r\n * \u5546\u54c1\u306e\u30e2\u30c7\u30eb\r\n *\/<\/span>\r\nexport<\/span> class<\/span> Product<\/span> {<\/span>\r\n  \/** ID *\/<\/span>\r\n  id<\/span>:<\/span> number<\/span>;<\/span>\r\n  \/** \u54c1\u540d *\/<\/span>\r\n  name<\/span>:<\/span> string<\/span>;<\/span>\r\n  \/** \u5165\u8377\u65e5 *\/<\/span>\r\n  arrivalAt<\/span>:<\/span> Date<\/span>;<\/span>\r\n  \/** \u4f5c\u6210\u8005ID *\/<\/span>\r\n  createUserId<\/span>:<\/span> number<\/span>;<\/span>\r\n  \/** \u4f5c\u6210\u65e5 *\/<\/span>\r\n  createdAt<\/span>:<\/span> string<\/span>;<\/span>\r\n  \/** \u66f4\u65b0\u8005ID *\/<\/span>\r\n  updateUserId<\/span>:<\/span> number<\/span>;<\/span>\r\n  \/** \u66f4\u65b0\u65e5 *\/<\/span>\r\n  updatedAt<\/span>:<\/span> string<\/span>;<\/span>\r\n  \/** \u524a\u9664\u30d5\u30e9\u30b0 *\/<\/span>\r\n  isDeleted<\/span>:<\/span> boolean<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\/**\r\n * \u5546\u54c1\u691c\u7d22\u6761\u4ef6\u306e\u30e2\u30c7\u30eb\r\n *\/<\/span>\r\nexport<\/span> interface<\/span> ProductsSC<\/span> {<\/span>\r\n  \/** ID *\/<\/span>\r\n  id<\/span>:<\/span> number<\/span>;<\/span>\r\n  \/** \u5546\u54c1\u540d *\/<\/span>\r\n  name<\/span>:<\/span> string<\/span>;<\/span>\r\n  \/** \u5165\u8377\u65e5 *\/<\/span>\r\n  arrivalAt<\/span>:<\/span> {<\/span>\r\n    \/** from *\/<\/span>\r\n    from<\/span>:<\/span> Date<\/span>;<\/span>\r\n    \/** to *\/<\/span>\r\n    to<\/span>:<\/span> Date<\/span>;<\/span>\r\n  };<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u670d\u52a1<\/h3>\n
import<\/span> {<\/span> HttpClient<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Injectable<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Product<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/product.model<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductsSC<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/search-conditions\/products-sc.model<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> map<\/span> }<\/span> from<\/span> '<\/span>rxjs\/operators<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> URL<\/span> =<\/span> '<\/span>\/products<\/span>'<\/span>;<\/span>\r\n\r\n\/**\r\n * \u5546\u54c1API\u901a\u4fe1\u30b5\u30fc\u30d3\u30b9.\r\n *\/<\/span>\r\n@<\/span>Injectable<\/span>({<\/span>\r\n  providedIn<\/span>:<\/span> '<\/span>root<\/span>'<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductsHttpService<\/span> {<\/span>\r\n\r\n  constructor<\/span>(<\/span>private<\/span> http<\/span>:<\/span> HttpClient<\/span>)<\/span> {<\/span> }<\/span>\r\n\r\n  search<\/span>(<\/span>conditions<\/span>:<\/span> ProductsSC<\/span>):<\/span> Observable<\/span><<\/span>Product<\/span>[]<\/span>><\/span> {<\/span>\r\n    const<\/span> API_URL<\/span> =<\/span> `<\/span>${<\/span>environment<\/span>.<\/span>apiBaseUrl<\/span>}${<\/span>URL<\/span>}<\/span>`<\/span>;<\/span>\r\n\r\n    return<\/span> this<\/span>.<\/span>http<\/span>\r\n      .<\/span>post<\/span><<\/span>Product<\/span>[]<\/span>><\/span>(<\/span>API_URL<\/span>,<\/span> conditions<\/span>)<\/span>\r\n      .<\/span>pipe<\/span>(<\/span>\r\n        map<\/span>(<\/span>res<\/span> =><\/span> res<\/span>[<\/span>'<\/span>payload<\/span>'<\/span>])<\/span>\r\n      );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6a21\u5757<\/h3>\n
import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> SharedModule<\/span> }<\/span> from<\/span> '<\/span>@shared\/shared.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> SearchProductsFormComponent<\/span> }<\/span> from<\/span> '<\/span>.\/components\/search-products-form\/search-products-form.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> PreProductEditComponent<\/span> }<\/span> from<\/span> '<\/span>.\/pages\/pre-product-edit\/pre-product-edit.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/pages\/product-list\/product-list.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductListSmartComponent<\/span> }<\/span> from<\/span> '<\/span>.\/pages\/product-list\/product-list.smart.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductComponent<\/span> }<\/span> from<\/span> '<\/span>.\/product.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductsRoutingModule<\/span> }<\/span> from<\/span> '<\/span>.\/products-routing.module<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> COMPONENTS<\/span> =<\/span> [<\/span>\r\n  ProductComponent<\/span>,<\/span>\r\n  ProductListComponent<\/span>,<\/span>\r\n  ProductListSmartComponent<\/span>,<\/span>\r\n  SearchProductsFormComponent<\/span>\r\n];<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    SharedModule<\/span>,<\/span>\r\n    ProductsRoutingModule<\/span>\r\n  ],<\/span>\r\n  declarations<\/span>:<\/span> COMPONENTS<\/span>,<\/span>\r\n  exports<\/span>:<\/span> COMPONENTS<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductsModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
\u8def\u7531\u7cfb\u7edf<\/h3>\n
\u4f7f\u7528\u5ef6\u8fdf\u52a0\u8f7d\u8fdb\u884c\u5b9e\u65bd\u3002
\n\u8be6\u7ec6\u8bf4\u660e<\/p>\n
import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> RouterModule<\/span>,<\/span> Routes<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductListSmartComponent<\/span> }<\/span> from<\/span> '<\/span>.\/pages\/product-list\/product-list.smart.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductComponent<\/span> }<\/span> from<\/span> '<\/span>.\/product.component<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> routes<\/span>:<\/span> Routes<\/span> =<\/span> [<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> ''<\/span>,<\/span>\r\n    component<\/span>:<\/span> ProductComponent<\/span>,<\/span>\r\n    children<\/span>:<\/span> [<\/span>\r\n      {<\/span>\r\n        path<\/span>:<\/span> '<\/span>list<\/span>'<\/span>,<\/span>\r\n        component<\/span>:<\/span> ProductListSmartComponent<\/span>,<\/span>\r\n      }<\/span>\r\n    ]<\/span>\r\n  }<\/span>\r\n];<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>RouterModule<\/span>.<\/span>forChild<\/span>(<\/span>routes<\/span>)],<\/span>\r\n  exports<\/span>:<\/span> [<\/span>RouterModule<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductsRoutingModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
\u7ec4\u4ef6<\/h3>\n
\u7528\u4e8e\u5ef6\u8fdf\u6a21\u5757\u8def\u7531\u7684\u7ec4\u4ef6<\/p>\n
import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-product<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> `\r\n    <router-outlet><\/router-outlet>\r\n  `<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n  ngOnInit<\/span>()<\/span> {<\/span> }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5bb9\u5668\u7ec4\u4ef6<\/h3>\n
\/\/ .smart.conponent.ts\u306e\u300c.smart\u300d\u306f\u4efb\u610f\u3067\u3059<\/span>\r\n\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductsHttpService<\/span> }<\/span> from<\/span> '<\/span>@core\/http\/products-http.service<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Product<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/product.model<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductsSC<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/search-conditions\/products-sc.model<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\n\r\n\/**\r\n * \u30b3\u30f3\u30c6\u30ca(\u30b9\u30de\u30fc\u30c8)\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n *\/<\/span>\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-product-list-smart<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> `\r\n    <!-- search-products-form\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u691c\u7d22\u30dc\u30bf\u30f3\u62bc\u4e0b\u306e@Output\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002\u5f15\u6570\u306b\u30d5\u30a9\u30fc\u30e0\u306e\u5024\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002 -->\r\n    <app-search-products-form (search)=\"searchProducts($event)\"><\/app-search-products-form>\r\n    <!-- product-list\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u5546\u54c1\u306e\u691c\u7d22\u7d50\u679c\u306e\u30ea\u30b9\u30c8\u3092\u6e21\u3057\u307e\u3059\u3002async\u30d1\u30a4\u30d7\u3092\u5229\u7528\u307e\u3059\u3002 -->\r\n    <app-product-list [products]=\"products$|async\"><\/app-product-list>\r\n  `<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductListSmartComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  products$<\/span>:<\/span> Observable<\/span><<\/span>Product<\/span>[]<\/span>><\/span>\r\n\r\n  constructor<\/span>(<\/span>private<\/span> productHttpService<\/span>:<\/span> ProductsHttpService<\/span>)<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  \/**\r\n   * \u691c\u7d22\u51e6\u7406.\r\n   * \u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30ca\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u306e@Output\u30a4\u30d9\u30f3\u30c8\u3067\u547c\u3070\u308c\u307e\u3059.\r\n   *\/<\/span>\r\n  searchProducts<\/span>(<\/span>searchFormValue<\/span>:<\/span> ProductsSC<\/span>):<\/span> void<\/span> {<\/span>\r\n    \/\/ async\u30d1\u30a4\u30d7\u3092\u4f7f\u3046\u306e\u3067subscribe\u306f\u4e0d\u8981\u3067\u3059\u3002Observable\u306e\u307e\u307e\u5909\u6570\u306b\u683c\u7d0d\u3057\u307e\u3059\u3002<\/span>\r\n    this<\/span>.<\/span>products$<\/span> =<\/span> this<\/span>.<\/span>productHttpService<\/span>.<\/span>search<\/span>(<\/span>searchFormValue<\/span>);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6f14\u793a\u7ec4\u4ef6<\/h3>\n
import<\/span> {<\/span> Component<\/span>,<\/span> Input<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Product<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/product.model<\/span>'<\/span>;<\/span>\r\n\r\n\/**\r\n * \u5546\u54c1\u4e00\u89a7\u306e\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30ca\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8.\r\n *\/<\/span>\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-product-list<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/product-list.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/product-list.component.scss<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductListComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  \/\/ \u30b3\u30f3\u30c6\u30ca\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5546\u54c1\u30ea\u30b9\u30c8\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059.<\/span>\r\n  @<\/span>Input<\/span>()<\/span>\r\n  products<\/span>:<\/span> Product<\/span>[];<\/span>\r\n\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n  ngOnInit<\/span>()<\/span> {<\/span> }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
<ng-container<\/span> *ngFor=<\/span>\"let data of products\"<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"d-flex\"<\/span>><\/span>\r\n    <div><\/span>{{data.id}}\uff5c<\/div><\/span>\r\n    <div><\/span>{{data.name}}\uff5c<\/div><\/span>\r\n    <div><\/span>\r\n      {{data.arrivalAt | date: \"yyyy\/MM\/dd\"}}\r\n    <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/ng-container><\/span>\r\n<\/code><\/pre>\n
\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> EventEmitter<\/span>,<\/span> OnInit<\/span>,<\/span> Output<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgForm<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductsSC<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/search-conditions\/products-sc.model<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-search-products-form<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/search-products-form.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/search-products-form.component.scss<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> SearchProductsFormComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  @<\/span>Output<\/span>()<\/span>\r\n  private<\/span> search<\/span> =<\/span> new<\/span> EventEmitter<\/span><<\/span>ProductsSC<\/span>><\/span>();<\/span>\r\n\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  \/**\r\n   * \u691c\u7d22\u30dc\u30bf\u30f3\u62bc\u4e0b\u6642\u306e\u51e6\u7406.\r\n   * \u30b3\u30f3\u30c6\u30ca\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u30a4\u30d9\u30f3\u30c8\u3092\u901a\u77e5\u3057\u307e\u3059\u3002\r\n   *\/<\/span>\r\n  onSearch<\/span>(<\/span>searchForm<\/span>:<\/span> NgForm<\/span>):<\/span> void<\/span> {<\/span>\r\n    \/\/ \u30b9\u30d7\u30ec\u30c3\u30c9\u3067form\u306e\u5024\u3092\u5c55\u958b\u3057\u307e\u3059\u3002<\/span>\r\n    this<\/span>.<\/span>search<\/span>.<\/span>emit<\/span>({...<\/span>searchForm<\/span>.<\/span>value<\/span>});<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\r\n<form<\/span>\r\n  #searchForm<\/span>=\"<\/span>ngForm<\/span>\"<\/span>\r\n  (ngSubmit)=<\/span>\"onSearch(searchForm)\"<\/span>><\/span>\r\n  <div><\/span>\r\n    <label><\/span>ID:<\/label><\/span>\r\n    <input<\/span>\r\n      type=<\/span>\"text\"<\/span>\r\n      name=<\/span>\"id\"<\/span>\r\n      ngModel<\/span>><\/span>\r\n  <\/div><\/span>\r\n  <div><\/span>\r\n    <label><\/span>\u5546\u54c1\u540d:<\/label><\/span>\r\n    <input<\/span>\r\n      type=<\/span>\"text\"<\/span>\r\n      name=<\/span>\"name\"<\/span>\r\n      ngModel<\/span>><\/span>\r\n  <\/div><\/span>\r\n  <fieldset<\/span> ngModelGroup=<\/span>\"arrivalAt\"<\/span>><\/span>\r\n    <div><\/span>\r\n      <label><\/span>\u5165\u8377\u65e5:<\/label><\/span>\r\n      <input<\/span>\r\n        type=<\/span>\"text\"<\/span>\r\n        name=<\/span>\"from\"<\/span>\r\n        ngModel<\/span>><\/span>\r\n    <\/div><\/span>\r\n    <div><\/span>\r\n      <label><\/span>\u301c<\/label><\/span>\r\n      <input<\/span>\r\n        type=<\/span>\"text\"<\/span>\r\n        name=<\/span>\"to\"<\/span>\r\n        ngModel<\/span>><\/span>\r\n    <\/div><\/span>\r\n  <\/fieldset><\/span>\r\n  <button<\/span> type=<\/span>\"submit\"<\/span>><\/span>\u691c\u7d22<\/button><\/span>\r\n<\/form><\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u5728\u5bb9\u5668\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u8868\u5355\u3002<\/h2>\n
\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgForm<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ProductsHttpService<\/span> }<\/span> from<\/span> '<\/span>@core\/http\/products-http.service<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Product<\/span> }<\/span> from<\/span> '<\/span>@shared\/models\/product.model<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\n\r\n\/**\r\n * \u30b3\u30f3\u30c6\u30ca(\u30b9\u30de\u30fc\u30c8)\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n *\/<\/span>\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-product-list-smart<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> `\r\n    <!-- \u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30ca\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u306a\u304f\u81ea\u5206\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u691c\u7d22\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 -->\r\n    <form #searchForm=\"ngForm\" (ngSubmit)=\"onSearchProducts(searchForm)\">\r\n      <app-search-products-form><\/app-search-products-form>\r\n      <button type=\"submit\">\u691c\u7d22<\/button>\r\n    <\/form>\r\n    <app-product-list [products]=\"products$|async\"><\/app-product-list>\r\n  `<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ProductListSmartComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  products$<\/span>:<\/span> Observable<\/span><<\/span>Product<\/span>[]<\/span>><\/span>\r\n\r\n  constructor<\/span>(<\/span>private<\/span> productHttpService<\/span>:<\/span> ProductsHttpService<\/span>)<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  \/**\r\n   * \u691c\u7d22\u51e6\u7406.\r\n   *\/<\/span>\r\n  onSearchProducts<\/span>(<\/span>searchForm<\/span>:<\/span> NgForm<\/span>):<\/span> void<\/span> {<\/span>\r\n    this<\/span>.<\/span>products$<\/span> =<\/span> this<\/span>.<\/span>productHttpService<\/span>.<\/span>search<\/span>({...<\/span>searchForm<\/span>.<\/span>value<\/span>});<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ControlContainer<\/span>,<\/span> NgForm<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-search-products-form<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/search-products-form.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/search-products-form.component.scss<\/span>'<\/span>],<\/span>\r\n  \/\/ html\u306efieldset\u3067\u5b9a\u7fa9\u3057\u305fngModelGroup\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u304c\u3001NgForm\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u3092\u898b\u3064\u3051\u308b\u70ba\u306b\u4e0b\u8a18\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/span>\r\n  viewProviders<\/span>:<\/span> [{<\/span>provide<\/span>:<\/span> ControlContainer<\/span>.<\/span> useExisting<\/span>:<\/span> NgForm<\/span>}]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> SearchProductsFormComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n  ngOnInit<\/span>()<\/span> {<\/span> }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\r\n<div><\/span>\r\n  <label><\/span>ID:<\/label><\/span>\r\n  <input<\/span>\r\n    type=<\/span>\"text\"<\/span>\r\n    name=<\/span>\"id\"<\/span>\r\n    ngModel<\/span>><\/span>\r\n<\/div><\/span>\r\n<div><\/span>\r\n  <label><\/span>\u5546\u54c1\u540d:<\/label><\/span>\r\n  <input<\/span>\r\n    type=<\/span>\"text\"<\/span>\r\n    name=<\/span>\"name\"<\/span>\r\n    ngModel<\/span>><\/span>\r\n<\/div><\/span>\r\n<fieldset<\/span> ngModelGroup=<\/span>\"arrivalAt\"<\/span>><\/span>\r\n  <div><\/span>\r\n    <label><\/span>\u5165\u8377\u65e5:<\/label><\/span>\r\n    <input<\/span>\r\n      type=<\/span>\"text\"<\/span>\r\n      name=<\/span>\"from\"<\/span>\r\n      ngModel<\/span>><\/span>\r\n  <\/div><\/span>\r\n  <div><\/span>\r\n    <label><\/span>\u301c<\/label><\/span>\r\n    <input<\/span>\r\n      type=<\/span>\"text\"<\/span>\r\n      name=<\/span>\"to\"<\/span>\r\n      ngModel<\/span>><\/span>\r\n  <\/div><\/span>\r\n<\/fieldset><\/span>\r\n<\/code><\/pre>\n
\u53c2\u8003
\nviewProviders
\nuseExisting
\nhttps:\/\/medium.com\/@a.yurich.zuev\/angular-nested-template-driven-form-4a3de2042475<\/p>\n
\u53c2\u89c1
\nviewProviders
\nuseExisting
\nhttps:\/\/medium.com\/@a.yurich.zuev\/angular-nested-template-driven-form-4a3de2042475<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u7bc7\u6587\u7ae0\u7684\u6458\u8981 \u6309\u7167\u5bb9\u5668\uff08\u667a\u80fd\uff09\u7ec4\u4ef6\u548c\u5c55\u793a\u6027\u7ec4\u4ef6\u7684\u6982\u5ff5\uff0c\u521b\u5efa\u4e00\u4e2a\u6309\u7167\u7ec4\u4ef6\u65b9\u5f0f\u5206\u5272\u7684\u641c\u7d22\u5217\u8868\u754c\u9762\u3002 \u5173\u4e8e\u5bb9\u5668\uff08\u667a […]<\/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-39186","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011 - 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\/\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010angular\u3011\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u7bc7\u6587\u7ae0\u7684\u6458\u8981 \u6309\u7167\u5bb9\u5668\uff08\u667a\u80fd\uff09\u7ec4\u4ef6\u548c\u5c55\u793a\u6027\u7ec4\u4ef6\u7684\u6982\u5ff5\uff0c\u521b\u5efa\u4e00\u4e2a\u6309\u7167\u7ec4\u4ef6\u65b9\u5f0f\u5206\u5272\u7684\u641c\u7d22\u5217\u8868\u754c\u9762\u3002 \u5173\u4e8e\u5bb9\u5668\uff08\u667a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010angular\u3011\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-26T02:20:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T08:04:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38f537434c4406c7839b\/5-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=\"5 \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\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/\",\"name\":\"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2022-12-26T02:20:20+00:00\",\"dateModified\":\"2024-04-30T08:04:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011\"}]},{\"@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\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011 - 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\/\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010angular\u3011\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011","og_description":"\u8fd9\u7bc7\u6587\u7ae0\u7684\u6458\u8981 \u6309\u7167\u5bb9\u5668\uff08\u667a\u80fd\uff09\u7ec4\u4ef6\u548c\u5c55\u793a\u6027\u7ec4\u4ef6\u7684\u6982\u5ff5\uff0c\u521b\u5efa\u4e00\u4e2a\u6309\u7167\u7ec4\u4ef6\u65b9\u5f0f\u5206\u5272\u7684\u641c\u7d22\u5217\u8868\u754c\u9762\u3002 \u5173\u4e8e\u5bb9\u5668\uff08\u667a […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010angular\u3011\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2022-12-26T02:20:20+00:00","article_modified_time":"2024-04-30T08:04:22+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38f537434c4406c7839b\/5-0.png"}],"author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/","name":"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2022-12-26T02:20:20+00:00","dateModified":"2024-04-30T08:04:22+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5c1d\u8bd5\u901a\u8fc7\u5c06\u641c\u7d22\u5217\u8868\u9875\u9762\u5206\u5272\u4e3a\u7ec4\u4ef6\u6765\u521b\u5efa\u3010Angular\u3011"}]},{"@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\/%e5%b0%9d%e8%af%95%e9%80%9a%e8%bf%87%e5%b0%86%e6%90%9c%e7%b4%a2%e5%88%97%e8%a1%a8%e9%a1%b5%e9%9d%a2%e5%88%86%e5%89%b2%e4%b8%ba%e7%bb%84%e4%bb%b6%e6%9d%a5%e5%88%9b%e5%bb%ba%e3%80%90angular%e3%80%91\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39186","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=39186"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39186\/revisions"}],"predecessor-version":[{"id":92894,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39186\/revisions\/92894"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}