{"id":39021,"date":"2024-01-15T03:56:44","date_gmt":"2023-01-19T10:47:41","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/"},"modified":"2024-05-04T18:27:39","modified_gmt":"2024-05-04T10:27:39","slug":"%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/","title":{"rendered":"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668"},"content":{"rendered":"

\u8d77\u521d\/\u9996\u5148\/\u9996\u8981\u4e00\u70b9<\/h1>\n

\u6211\u5011\u5c07\u5728Angular2\u4e2d\u5617\u8a66\u4f7f\u7528\u8def\u7531\u529f\u80fd\uff0c\u9019\u5728\u5927\u578bSPA\u4e2d\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002
\n\u6211\u5011\u5c07\u4f7f\u7528Angular2\u7684\u7248\u672c\u70ba2.0.0-beta.0\u3002<\/p>\n

\u8def\u7531\u5668<\/h1>\n

\u9996\u5148\uff0c\u8ba9\u6211\u4eec\u5c55\u793a\u4e00\u4e2a\u6700\u7b80\u5355\u7684\u793a\u4f8b\u3002
\n\u53c2\u8003 beta.0 \u66f4\u65b0\u7684 5 MIN QUICKSTART\uff0c\u6211\u4eec\u5b89\u6392\u4e86\u4ee5\u4e0b\u7684\u76ee\u5f55\u7ed3\u6784\u3002<\/p>\n

my-app\r\n\u251c node_modules\r\n\u251c app\r\n\u2502 \u251c app.component.ts\r\n\u2502 \u251c page1.component.ts\r\n\u2502 \u251c page2.component.ts\r\n\u2502 \u2514 boot.ts\r\n\u251c index.html\r\n\u251c package.json\r\n\u2514 tsconfig.json\r\n<\/code><\/pre>\n
\u4ee5\u4e0b\u662findex.html\u7684\u5185\u5bb9\u3002<\/p>\n
<html><\/span>\r\n  <head><\/span>\r\n    <title><\/span>Angular 2 QuickStart<\/title><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/angular2\/bundles\/angular2-polyfills.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/systemjs\/dist\/system.src.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/rxjs\/bundles\/Rx.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/angular2\/bundles\/angular2.dev.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/angular2\/bundles\/router.dev.js\"<\/span>><\/script><\/span>\r\n    <script><\/span>\r\n      System<\/span>.<\/span>config<\/span>({<\/span>\r\n        packages<\/span>:<\/span> {<\/span>\r\n          app<\/span>:<\/span> {<\/span>\r\n            format<\/span>:<\/span> '<\/span>register<\/span>'<\/span>,<\/span>\r\n            defaultExtension<\/span>:<\/span> '<\/span>js<\/span>'<\/span>\r\n          }<\/span>\r\n        }<\/span>\r\n      });<\/span>\r\n      System<\/span>.<\/span>import<\/span>(<\/span>'<\/span>app\/boot<\/span>'<\/span>)<\/span>\r\n        .<\/span>then<\/span>(<\/span>null<\/span>,<\/span> console<\/span>.<\/span>error<\/span>.<\/span>bind<\/span>(<\/span>console<\/span>));<\/span>\r\n    <\/script><\/span>\r\n    <base<\/span> href=<\/span>\"\/\"<\/span>><\/span>\r\n  <\/head><\/span>\r\n  <body><\/span>\r\n    <my-app><\/span>Loading...<\/my-app><\/span>\r\n  <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
\u57285\u5206\u949f\u5feb\u901f\u5165\u95e8\u7684index.html\u4e2d\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86\u4e00\u4e2ascript\u5143\u7d20\u548c\u4e00\u4e2abase\u5143\u7d20\u6765\u52a0\u8f7drouter.dev.js\u3002<\/p>\n
\u4ee5\u4e0b\u662f\u56db\u4e2aTypeScript\u6587\u4ef6\u7684\u5185\u5bb9\u3002<\/p>\n
import<\/span> {<\/span>Component<\/span>}<\/span> from<\/span> '<\/span>angular2\/core<\/span>'<\/span>\r\n\r\nconst<\/span> template<\/span> =<\/span> `\r\n<h2>page 1<\/h2>\r\n`<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  template<\/span>:<\/span> template<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> Page1<\/span> {<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
import<\/span> {<\/span>Component<\/span>}<\/span> from<\/span> '<\/span>angular2\/core<\/span>'<\/span>\r\n\r\nconst<\/span> template<\/span> =<\/span> `\r\n<h2>page 2<\/h2>\r\n`<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  template<\/span>:<\/span> template<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> Page2<\/span> {<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u7531\u4e8e\u9875\u97621\u548c\u9875\u97622\u4e0d\u76f4\u63a5\u5f15\u7528\u6a21\u677f\uff0c\u56e0\u6b64\u53ef\u4ee5\u7701\u7565\u9009\u62e9\u5668\u3002<\/p>\n
import<\/span> {<\/span>Component<\/span>}<\/span> from<\/span> '<\/span>angular2\/core<\/span>'<\/span>\r\nimport<\/span> {<\/span>RouteConfig<\/span>,<\/span> ROUTER_DIRECTIVES<\/span>}<\/span> from<\/span> '<\/span>angular2\/router<\/span>'<\/span>\r\nimport<\/span> {<\/span>Page1<\/span>}<\/span> from<\/span> '<\/span>.\/page1.component<\/span>'<\/span>\r\nimport<\/span> {<\/span>Page2<\/span>}<\/span> from<\/span> '<\/span>.\/page2.component<\/span>'<\/span>\r\n\r\nconst<\/span> template<\/span> =<\/span> `\r\n<router-outlet><\/router-outlet>\r\n`<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>my-app<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> template<\/span>,<\/span>\r\n  directives<\/span>:<\/span> [<\/span>ROUTER_DIRECTIVES<\/span>]<\/span>\r\n})<\/span>\r\n@<\/span>RouteConfig<\/span>([<\/span>\r\n  {<\/span>\r\n    useAsDefault<\/span>:<\/span> true<\/span>,<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/page1<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> Page1<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/page2<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> Page2<\/span>\r\n  }<\/span>\r\n])<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
import<\/span> {<\/span>bootstrap<\/span>}<\/span> from<\/span> '<\/span>angular2\/platform\/browser<\/span>'<\/span>\r\nimport<\/span> {<\/span>ROUTER_PROVIDERS<\/span>}<\/span> from<\/span> '<\/span>angular2\/router<\/span>'<\/span>\r\nimport<\/span> {<\/span>AppComponent<\/span>}<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>\r\n\r\nbootstrap<\/span>(<\/span>AppComponent<\/span>,<\/span> [<\/span>\r\n  ROUTER_PROVIDERS<\/span>\r\n]);<\/span>\r\n<\/code><\/pre>\n
\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u5e94\u8be5\u4f1a\u8df3\u8f6c\u5230http:\/\/localhost:3000\/page1\u5e76\u663e\u793a\u201cpage 1\u201d\u3002\u8f93\u5165URL\u5e76\u8df3\u8f6c\u5230http:\/\/localhost:3000\/page2\u65f6\uff0c\u663e\u793a\u5185\u5bb9\u5e94\u8be5\u4f1a\u53d8\u6210\u201cpage 2\u201d\u3002<\/p>\n
\u6682\u4e14\u91cd\u8981\u7684\u662fapp.component.ts\u7684@RouteConfig\u3002
\n\u8be5\u53c2\u6570\u9700\u8981\u4f20\u5165\u4e00\u4e2aRoute\u6570\u7ec4\u3002<\/p>\n
\u5728Route\u7684\u53c2\u6570\u4e2d\uff0c\u5fc5\u987b\u8981\u6709path\u548ccomponent\u3002path\u662fURL\u4e2d\u53cd\u6620\u7684\u8def\u5f84\u540d\u79f0\uff0ccomponent\u662f\u4e0e\u6b64Route\u5bf9\u5e94\u7684\u7ec4\u4ef6\u3002<\/p>\n
\u901a\u8fc7\u5728\u524d\u5f80Page1\u7684Route\u4e2d\u6dfb\u52a0useAsDefault: true\uff0c\u5f53\u8bbf\u95eehttp:\/\/localhost:3000\/\u65f6\uff0c\u4f1a\u81ea\u52a8\u8df3\u8f6c\u5230http:\/\/localhost:3000\/page1\u3002<\/p>\n
Page1\u548cPage2\u7684\u5185\u5bb9\u4f1a\u663e\u793a\u5728\u6a21\u677f\u7684\u4f4d\u7f6e\u4e0a\u3002
\n\u4f7f\u7528\u9700\u8981\u4eceangular\/router\u5bfc\u5165ROUTER_DIRECTIVES\u3002<\/p>\n
\u8def\u7531\u94fe\u63a5<\/h1>\n
\u55ef\uff0c\u5982\u679c\u4fdd\u6301\u539f\u6837\uff0c\u5c31\u5fc5\u987b\u624b\u52a8\u8f93\u5165URL\u624d\u80fd\u8fdb\u884c\u9875\u9762\u8df3\u8f6c\uff0c\u8fd9\u6837\u5f88\u4e0d\u65b9\u4fbf\u3002
\n\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528routerLink\u6765\u521b\u5efa\u5230\u8def\u7531\u7684\u94fe\u63a5\u3002<\/p>\n
import<\/span> {<\/span>Component<\/span>}<\/span> from<\/span> '<\/span>angular2\/core<\/span>'<\/span>\r\nimport<\/span> {<\/span>RouteConfig<\/span>,<\/span> ROUTER_DIRECTIVES<\/span>}<\/span> from<\/span> '<\/span>angular2\/router<\/span>'<\/span>\r\nimport<\/span> {<\/span>Page1<\/span>}<\/span> from<\/span> '<\/span>.\/page1.component<\/span>'<\/span>\r\nimport<\/span> {<\/span>Page2<\/span>}<\/span> from<\/span> '<\/span>.\/page2.component<\/span>'<\/span>\r\n\r\nconst<\/span> template<\/span> =<\/span> `\r\n<a [routerLink]=\"['Spam']\">page1<\/a>\r\n<a [routerLink]=\"['Ham']\">page2<\/a>\r\n<router-outlet><\/router-outlet>\r\n`<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>my-app<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> template<\/span>,<\/span>\r\n  directives<\/span>:<\/span> [<\/span>ROUTER_DIRECTIVES<\/span>]<\/span>\r\n})<\/span>\r\n@<\/span>RouteConfig<\/span>([<\/span>\r\n  {<\/span>\r\n    useAsDefault<\/span>:<\/span> true<\/span>,<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/page1<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> Page1<\/span>,<\/span>\r\n    name<\/span>:<\/span> '<\/span>Spam<\/span>'<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/page2<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> Page2<\/span>,<\/span>\r\n    name<\/span>:<\/span> '<\/span>Ham<\/span>'<\/span>\r\n  }<\/span>\r\n])<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u4fee\u6539\u70b9\u6709\u4e24\u5904\u3002
\n\u9996\u5148\uff0c\u5728Route\u7684\u53c2\u6570\u4e2d\u6dfb\u52a0name\u3002
\n\u7136\u540e\uff0c\u5728template\u4e2d\u6dfb\u52a0a\u5143\u7d20\uff0c\u5e76\u5728\u5c5e\u6027\u4e2d\u5199\u5165[routerLink]=”[‘Spam’]”\u3002
\n\u8fd9\u91cc\u7684”Spam”\u5bf9\u5e94\u4e8eRoute\u7684name\u4e2d\u7684”Spam”\u3002<\/p>\n
\u53e6\u5916\uff0c\u6709\u65f6\u5019Alpha\u7248\u7684\u6587\u6863\u4e2d\u4f1a\u5199\u6210router-link\uff0c\u4f46\u5b9e\u9645\u5e94\u8be5\u6539\u4e3arouterLink\uff0c\u8bf7\u6ce8\u610f\u4e00\u4e0b\u3002<\/p>\n
\u5bfc\u822a\u5668\u5bfc\u822a<\/h1>\n
\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u4f8b\u5982\u63d0\u4ea4\u8868\u5355\u65f6\uff0c\u6211\u8ba4\u4e3a\u60a8\u53ef\u80fd\u5e0c\u671b\u5728Component\u5185\u5148\u8fdb\u884c\u5904\u7406\uff0c\u7136\u540e\u518d\u8fdb\u884c\u9875\u9762\u8df3\u8f6c\u3002
\n\u4ee5\u4e0b\u662f\u4e00\u4e2a\u5b9e\u73b0\u793a\u4f8b\u3002<\/p>\n
import<\/span> {<\/span>Component<\/span>}<\/span> from<\/span> '<\/span>angular2\/core<\/span>'<\/span>\r\nimport<\/span> {<\/span>Router<\/span>}<\/span> from<\/span> '<\/span>angular2\/router<\/span>'<\/span>\r\n\r\nconst<\/span> template<\/span> =<\/span> `\r\n<h2>page 2<\/h2>\r\n<button (click)=\"goPage1()\">go to page1<\/button>\r\n`<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  template<\/span>:<\/span> template<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> Page2<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>public<\/span> router<\/span>:<\/span> Router<\/span>)<\/span> {<\/span>\r\n  }<\/span>\r\n\r\n  goPage1<\/span>()<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>go to page1<\/span>'<\/span>);<\/span>\r\n    this<\/span>.<\/span>router<\/span>.<\/span>navigate<\/span>([<\/span>'<\/span>Spam<\/span>'<\/span>]);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
router.navigate\u7684\u53c2\u6570\u4f3c\u4e4e\u4e0etemplate\u4e2d\u7684routerLink\u76f8\u540c\u3002<\/p>\n
\u5b9a\u4f4d\u7b56\u7565<\/h1>\n
\u5728Angular2\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528LocationStrategy\u6765\u8bbe\u7f6e\u5c06Path\u8f6c\u6362\u4e3aURL\u65f6\u5b9e\u9645\u4f7f\u7528https:\/\/example.com\/page1\u8fd8\u662fhttps:\/\/example.com\/#\/page1\u3002
\n\u8fd9\u7c7b\u4f3c\u4e8eAngular1\u4e2d\u7684$locationProvider.html5Mode\u3002
\n\u524d\u8005\u79f0\u4e3aPathLocationStrategy\uff0c\u540e\u8005\u79f0\u4e3aHashLocationStrategy\u3002<\/p>\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cPathLocationStrategy\u662f\u4f7f\u7528\u7684\uff0c\u5982\u679c\u8981\u66f4\u6539\u4e3aHashLocationStrategy\u7684\u793a\u4f8b\u5982\u4e0b\u6240\u793a\u3002<\/p>\n
import<\/span> {<\/span>provide<\/span>}<\/span> from<\/span> '<\/span>angular2\/core<\/span>'<\/span>\r\nimport<\/span> {<\/span>bootstrap<\/span>}<\/span> from<\/span> '<\/span>angular2\/platform\/browser<\/span>'<\/span>\r\nimport<\/span> {<\/span>ROUTER_PROVIDERS<\/span>,<\/span> LocationStrategy<\/span>,<\/span> HashLocationStrategy<\/span>}<\/span> from<\/span> '<\/span>angular2\/router<\/span>'<\/span>\r\nimport<\/span> {<\/span>AppComponent<\/span>}<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>\r\n\r\nbootstrap<\/span>(<\/span>AppComponent<\/span>,<\/span> [<\/span>\r\n  ROUTER_PROVIDERS<\/span>,<\/span>\r\n  provide<\/span>(<\/span>LocationStrategy<\/span>,<\/span> {<\/span>useClass<\/span>:<\/span> HashLocationStrategy<\/span>})<\/span>\r\n]);<\/span>\r\n<\/code><\/pre>\n
\u751f\u547d\u5468\u671f\u94a9\u5b50<\/h1>\n
\u5728Angular2\u4e2d\uff0c\u901a\u8fc7\u751f\u547d\u5468\u671f\u94a9\u5b50\u53ef\u4ee5\u5728\u7ec4\u4ef6\u72b6\u6001\u53d8\u5316\u7684\u65f6\u673a\u63d2\u5165\u5904\u7406\u3002\u8def\u7531\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u67095\u79cd\u7c7b\u578b\uff0c\u5206\u522b\u662fOnActivate\u3001OnReuse\u3001OnDeactivate\u3001CanReuse\u548cCanDeactivate\u3002<\/p>\n
\u6bcf\u4e2aHook\u90fd\u4f5c\u4e3aInterface\u63d0\u4f9b\uff0c\u5e76\u4e14\u5728Component\u4e2d\u5b9e\u73b0Interface\u7684\u65b9\u6cd5\u3002
\n\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\u3002<\/p>\n
import {Component} from 'angular2\/core'\r\nimport {OnActivate, OnReuse, OnDeactivate, CanReuse, CanDeactivate} from 'angular2\/router'\r\n\r\nconst template = `\r\n<h2>page 1<\/h2>\r\n`;\r\n\r\n@Component({\r\n  template: template\r\n})\r\nexport class Page1 implements OnActivate, OnReuse, OnDeactivate, CanReuse, CanDeactivate {\r\n  routerOnActivate() {\r\n    console.log('onActivate');\r\n  }\r\n\r\n  routerOnReuse() {\r\n    console.log('onReuse');\r\n  }\r\n\r\n  routerOnDeactivate() {\r\n    console.log('onDeactivate');\r\n  }\r\n\r\n  routerCanReuse() {\r\n    return confirm('can reuse?');\r\n  }\r\n\r\n  routerCanDeactivate() {\r\n    return confirm('can deactivate?');\r\n  }\r\n}\r\n<\/code><\/pre>\n
\u5728OnActivate\u7684\u63a5\u53e3\u4e2d\uff0crouterOnActivate\u65b9\u6cd5\u5bf9\u5e94\u7684\u611f\u89c9\u662f\u8fd9\u6837\u7684\u3002
\nrouterCanReuse\u548crouterCanDeactivate\u73b0\u5728\u8fd4\u56de\u5e03\u5c14\u503c\u6216Promise\u3002
\n\u867d\u7136\u6211\u4eec\u8fd9\u6b21\u6ca1\u6709\u5c1d\u8bd5\uff0c\u4f46\u662f\u901a\u8fc7\u8fd4\u56dePromise\uff0c\u4e5f\u53ef\u4ee5\u8fdb\u884c\u5f02\u6b65\u5904\u7406\u3002<\/p>\n
\u6700\u540e<\/h1>\n
\u672c\u6587\u4e2d\u6211\u8bd5\u7528\u4e86\u4e00\u4e9b\u5728Angular2\u7684\u8def\u7531\u5668\u4e2d\u7ecf\u5e38\u4f7f\u7528\u7684\u529f\u80fd\u3002
\n\u4eca\u5e74\u6625\u5929\u6211\u5c1d\u8bd5\u8fc7Angular1\u7684\u7ec4\u4ef6\u8def\u7531\u5668\uff0c\u4f46\u662f\u5728\u90a3\u4e4b\u540e\u6211\u611f\u89c9Angular2\u7684\u8def\u7531\u5668\u66f4\u52a0\u7cbe\u7ec6\u3002<\/p>\n
\u5728\u64b0\u5199\u672c\u6587\u65f6\uff0c\u975e\u5e38\u611f\u8c22 @ovrmrw \u540c\u5b66\u5df2\u7ecf\u4e3a\u6211\u4eec\u7f16\u5199\u4e86\u4f7f\u7528\u8def\u7531\u5668\u7684\u793a\u4f8b\uff0c\u7ed9\u4e86\u6211\u4eec\u5f88\u5927\u7684\u5e2e\u52a9\u3002<\/p>\n
    \u521d\u5fc3\u8005\u304cAngular2\u3067\u5d4c\u307e\u3063\u305f\u308a\u89e3\u6c7a\u3057\u305f\u308a\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u66f8\u3044\u305f\u308a\u3057\u3066\u307f\u305f\u3002<\/ul>\n
    \u8bf7\u9605\u8bfb\u5b98\u65b9\u6587\u6863\u4ee5\u4e86\u89e3\u8def\u7531\u5668\u7684\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n
      Routing & Navigation<\/ul>\n","protected":false},"excerpt":{"rendered":"
      \u8d77\u521d\/\u9996\u5148\/\u9996\u8981\u4e00\u70b9 \u6211\u5011\u5c07\u5728Angular2\u4e2d\u5617\u8a66\u4f7f\u7528\u8def\u7531\u529f\u80fd\uff0c\u9019\u5728\u5927\u578bSPA\u4e2d\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002 \u6211\u5011\u5c07\u4f7f\u7528A […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39021","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668 - 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\u4f7f\u7528angular2\u7684\u8def\u7531\u5668\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668\" \/>\n<meta property=\"og:description\" content=\"\u8d77\u521d\/\u9996\u5148\/\u9996\u8981\u4e00\u70b9 \u6211\u5011\u5c07\u5728Angular2\u4e2d\u5617\u8a66\u4f7f\u7528\u8def\u7531\u529f\u80fd\uff0c\u9019\u5728\u5927\u578bSPA\u4e2d\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002 \u6211\u5011\u5c07\u4f7f\u7528A […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u4f7f\u7528angular2\u7684\u8def\u7531\u5668\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-19T10:47:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T10:27:39+00:00\" \/>\n<meta name=\"author\" content=\"\u65b0, \u97f5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u65b0, \u97f5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \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%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/\",\"name\":\"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-01-19T10:47:41+00:00\",\"dateModified\":\"2024-05-04T10:27:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/4ba4019495123db3038fd0809e6959c9\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668\"}]},{\"@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\/4ba4019495123db3038fd0809e6959c9\",\"name\":\"\u65b0, \u97f5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g\",\"caption\":\"\u65b0, \u97f5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunxin\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668 - 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\u4f7f\u7528angular2\u7684\u8def\u7531\u5668\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668","og_description":"\u8d77\u521d\/\u9996\u5148\/\u9996\u8981\u4e00\u70b9 \u6211\u5011\u5c07\u5728Angular2\u4e2d\u5617\u8a66\u4f7f\u7528\u8def\u7531\u529f\u80fd\uff0c\u9019\u5728\u5927\u578bSPA\u4e2d\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002 \u6211\u5011\u5c07\u4f7f\u7528A […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u4f7f\u7528angular2\u7684\u8def\u7531\u5668\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-01-19T10:47:41+00:00","article_modified_time":"2024-05-04T10:27:39+00:00","author":"\u65b0, \u97f5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u65b0, \u97f5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/","name":"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-01-19T10:47:41+00:00","dateModified":"2024-05-04T10:27:39+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/4ba4019495123db3038fd0809e6959c9"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5c1d\u8bd5\u4f7f\u7528Angular2\u7684\u8def\u7531\u5668"}]},{"@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\/4ba4019495123db3038fd0809e6959c9","name":"\u65b0, \u97f5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g","caption":"\u65b0, \u97f5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunxin\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular2%e7%9a%84%e8%b7%af%e7%94%b1%e5%99%a8\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39021","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39021"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39021\/revisions"}],"predecessor-version":[{"id":99962,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39021\/revisions\/99962"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}