{"id":523,"date":"2019-12-21T13:10:01","date_gmt":"2019-12-21T05:10:01","guid":{"rendered":"http:\/\/wccass.com\/?p=523"},"modified":"2019-12-21T13:10:01","modified_gmt":"2019-12-21T05:10:01","slug":"angular%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0-%e7%9c%8b%e5%ae%8c%e8%bf%99%e4%b8%aa%e8%bf%98%e6%8c%82%e7%a7%91%e7%ae%97%e6%88%91%e8%be%93","status":"publish","type":"post","link":"https:\/\/blog.tongyunli.top\/?p=523","title":{"rendered":"Angular\u5b66\u4e60\u7b14\u8bb0\uff082019-12-26\u66f4\u65b0\uff09"},"content":{"rendered":"\n

\u9605\u8bfb\u4e4b\u524d\u9700\u8981\u5177\u6709TypeScript\u57fa\u7840\u77e5\u8bc6TypeScript\u57fa\u7840\u603b\u7ed3<\/a> \u5982\u679c\u60a8\u7ee7\u7eed\u9605\u8bfb \u6211\u5c06\u9ed8\u8ba4\u4e3a\u60a8\u5df2\u5177\u6709\u76f8\u5173\u57fa\u7840\u77e5\u8bc6<\/p>\n\n\n\n

# \u642d\u5efa\u73af\u5883<\/strong><\/h3>\n\n\n\n

\u5b89\u88c5nodejs<\/h2>\n\n\n\n

\u4f7f\u7528npm\u547d\u4ee4\u5b89\u88c5angular
npm install \u2013g @angular\/cli<\/code>
\u67e5\u770b\u5b89\u88c5\u7ed3\u679c
ng v<\/code>\uff08\u67e5\u770b\u7248\u672c\u53f7 \u662f\u5426\u5b89\u88c5\u6210\u529f)<\/p>\n\n\n\n

\u5b89\u88c5 TypeScript<\/h2>\n\n\n\n

(\u56e0\u4e3aangular\u57fa\u4e8ets\u5f00\u53d1\u9700\u8981ts\u505a\u7f16\u8bd1)
npm install -g typescript<\/code>
tsc -v (\u67e5\u770b\u7248\u672c\u53f7 \u662f\u5426\u5b89\u88c5\u6210\u529f)
ts\u57fa\u7840\u81ea\u5df1\u770b\u53bb \u7b49\u6709\u7a7a\u5199\u4e00\u7bc7\u57fa\u7840\u603b\u7ed3<\/p>\n\n\n\n

\u65b0\u5efaangular\u9879\u76ee<\/h2>\n\n\n\n

ng new \u9879\u76ee\u540d<\/code>
\u7b49\u7740\u5427 \u7f51\u7edc\u6162\u6b7b\u4e86<\/p>\n\n\n\n

\u8fd0\u884c\u9879\u76ee<\/h2>\n\n\n\n

ng serve \u7aef\u53e3\u9ed8\u8ba4\u662f:4200<\/p>\n\n\n\n

\u9879\u76ee\u76ee\u5f55\u89e3\u91ca<\/h2>\n\n\n\n
\n  \u65b9\u6cd5\u540d\u79f0<\/strong>\n <\/td>\n \u8bf4\u660e<\/strong>\n <\/td><\/tr>
\n e2e<\/strong>\n <\/td>\n \u7aef\u5230\u7aef\u7684\u6d4b\u8bd5\u76ee\u5f55\uff0c\u7528\u6765\u505a\u81ea\u52a8\u6d4b\u8bd5\u7684<\/strong>\n <\/td><\/tr>
\n node_modules<\/strong>\n <\/td>\n \u7b2c\u4e09\u65b9\u4f9d\u8d56\u5305\u7684\u5b58\u653e\u76ee\u5f55<\/strong>\n <\/td><\/tr>
\n src<\/strong>\n <\/td>\n \u5b58\u653e\u6e90\u4ee3\u7801\u6587\u4ef6\uff0c\u6211\u4eec\u7684\u5f00\u53d1\u8fc7\u7a0b\u4e3b\u8981\u5728\u6b64\u76ee\u5f55\u64cd\u4f5c<\/strong>\n <\/td><\/tr>
\n .<\/strong>editorconfig.json<\/strong>\n <\/td>\n \u7f16\u8f91\u5668\u914d\u7f6e\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n .<\/strong>gitignore<\/strong>\n <\/td>\n git<\/strong>\u7684\u914d\u7f6e\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n angular.json<\/strong>\n <\/td>\n angular<\/strong>\u7684\u914d\u7f6e\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n browserslist<\/strong>\n <\/td>\n \u6d4f\u89c8\u5668\u5217\u8868<\/strong>\n <\/td><\/tr>
\n karma.conf.js<\/strong>\n <\/td>\n karma<\/strong>\u5355\u5143\u6d4b\u8bd5\u914d\u7f6e\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n package.json<\/strong>\n <\/td>\n npm<\/strong>\u7684\u914d\u7f6e\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n tsconfig.json<\/strong>\n <\/td>\n TypeScript<\/strong>\u7f16\u8bd1\u5668\u7684\u914d\u7f6e\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n tslint.json<\/strong>\n <\/td> \u914d\u7f6eTypeScript\u4ee3\u7801\u8d28\u91cf\u68c0\u67e5\u7684\u89c4\u5219<\/strong>
<\/td><\/tr><\/tbody><\/table>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

src\u76ee\u5f55\u662f\u9879\u76ee\u7684\u6838\u5fc3\u76ee\u5f55<\/strong><\/p>\n\n\n\n
\n  \u65b9\u6cd5\u540d\u79f0<\/strong>\n <\/td>\n \u8bf4\u660e<\/strong>\n <\/td><\/tr>
\n app<\/strong>\n <\/td>\n App<\/strong>\u76ee\u5f55\u5305\u542b\u5e94\u7528\u7a0b\u5e8f\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u5728\u5f00\u53d1\u4e2d\u6240\u6709\u7684\u7f16\u7801\u90fd\u5728\u8be5\u76ee\u5f55<\/strong>\n <\/td><\/tr>
\n assets<\/strong>\n <\/td>\n Assets<\/strong>\u76ee\u5f55\u7528\u4e8e\u5b58\u653e\u9759\u6001\u8d44\u6e90\u6587\u4ef6\uff0c\u6bd4\u5982\uff1a\u89c6\u9891<\/strong> <\/strong>\u3001\u56fe\u7247\u3001<\/strong>css<\/strong>\u3001<\/strong>js<\/strong>\u7b49<\/strong>\n <\/td><\/tr>
\n environments<\/strong>\n <\/td>\n \u4e3b\u8981\u7528\u4e8e\u73af\u5883\u914d\u7f6e<\/strong>\n <\/td><\/tr>
\n index.html<\/strong>\n <\/td>\n \u6574\u4e2a\u7f51\u7ad9\u7684\u9ed8\u8ba4\u9875\u9762\uff0c<\/strong>\n <\/td><\/tr>
\n main.ts<\/strong>\n <\/td>\n \u6574\u4e2a\u9879\u76ee\u7684\u5165\u53e3\u70b9\uff0c<\/strong>Angular<\/strong>\u901a\u8fc7\u6b64\u6587\u4ef6\u542f\u52a8\u9879\u76ee<\/strong>\n <\/td><\/tr>
\n polyfills.ts<\/strong>\n <\/td>\n \u7528\u6765\u5bfc\u5165\u4e00\u4e9b\u5fc5\u8981\u7684\u5e93\uff0c\u4f7f\u5176\u80fd\u591f\u5728\u8001\u7248\u672c\u4e0b\u8fd0\u884c<\/strong>\n <\/td><\/tr>
\n styles.css<\/strong>\n <\/td>\n \u5168\u5c40\u6837\u5f0f\u6587\u4ef6<\/strong>\n <\/td><\/tr>
\n test.ts<\/strong>\n <\/td>\n \u5355\u5143\u6d4b\u8bd5\u7684\u5165\u53e3\u6587\u4ef6<\/strong>\n <\/td><\/tr><\/tbody><\/table>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

\u6a21\u5757<\/h2>\n\n\n\n

ps:<\/p>\n\n\n\n

\u6bcf\u4e2a\u5e94\u7528\u4e2d\u81f3\u5c11\u5305\u542b\u4e00\u4e2a\u6a21\u5757\uff0c\u5373\u6839\u6a21\u5757\u3002<\/strong><\/p>\n\n\n\n

\u521b\u5efa\u9879\u76ee\u65f6\u81ea\u52a8\u521b\u5efa\u6839\u6a21\u5757(app.module.ts)<\/strong><\/p>\n\n\n\n

\u521b\u5efa\u9879\u76ee\u65f6\u81ea\u52a8\u521b\u5efa\u8def\u7531\u6a21\u5757(app-routing.module.ts)<\/strong><\/p>\n\n\n\n

Angular<\/strong>\u6a21\u5757\u662f\u5e26\u6709<\/strong>@<\/strong>NgModule<\/strong>(<\/strong>\u88c5\u9970\u5668<\/strong>)<\/strong>\u7684<\/strong>\u7c7b<\/strong><\/p>\n\n\n\n

\u7ec4\u4ef6 <\/h2>\n\n\n\n

\u65b0\u5efa\u7ec4\u4ef6<\/h3>\n\n\n\n

ng g component \u6a21\u5757\u540d<\/code><\/p>\n\n\n\n

\u521b\u5efa\u7ec4\u4ef6\u4e4b\u524d\uff0c\u8981\u505c\u6b62<\/strong>Angular<\/strong>\u9879\u76ee\u7684\u8fd0\u884c\uff1a\u5feb\u6377\u952e\uff1a<\/strong>ctrl+c<\/strong>\uff0c<\/strong>y<\/strong><\/p>\n\n\n\n

\u4e00\u4e2a\u7ec4\u4ef6\u5305\u542b\uff1a<\/strong>1.<\/strong> <\/strong>html<\/strong>\u6587\u4ef6\uff1a\u9875\u9762\u5143\u7d20\uff08\u6bd4\u5982\uff1a<\/strong>div<\/strong>\uff09<\/strong><\/p>\n\n\n\n

 <\/strong>                         2.  <\/strong>ts<\/strong>\u6587\u4ef6\uff1a\u5b9a\u4e49<\/strong>ts<\/strong>\u4ee3\u7801<\/strong><\/p>\n\n\n\n

 <\/strong>                         3.  <\/strong>css<\/strong>\u6587\u4ef6\uff1a\u7ec4\u4ef6\u7684\u6837\u5f0f\u4ee3\u7801<\/strong><\/p>\n\n\n\n

 <\/strong>                         4.  <\/strong>spec.ts<\/strong>\u6587\u4ef6\uff1a\u6d4b\u8bd5\u6587\u4ef6<\/strong><\/p>\n\n\n\n

\u5f15\u7528\u7ec4\u4ef6<\/h3>\n\n\n\n

<app-\u7ec4\u4ef6\u540d><\/app-<\/code> \u7ec4\u4ef6\u540d><\/code><\/p>\n\n\n\n

\u53d8\u91cf\u58f0\u660e<\/h2>\n\n\n\n

\u58f0\u660e\u53d8\u91cf
\u53d8\u91cf\u540d\uff1a\u7a7a\u683c \u7c7b\u578b\uff1b
\u76f4\u63a5\u521d\u59cb\u5316\u53d8\u91cf\uff08\u4e0d\u9700\u8981\u5b9a\u4e49\u7c7b\u578b \u8212\u670d\uff01\uff09
aa\u7a7a\u683c=\u7a7a\u683c1\uff1b
\naa\u7a7a\u683c=\u7a7a\u683ctrue\uff1b
\naa\u7a7a\u683c=\u7a7a\u683c\u2018\u6211\u662f\u8c01\uff1f\u2019\uff1b<\/code><\/p>\n\n\n\n

\u6dfb\u52a0bootstrap<\/strong><\/h2>\n\n\n\n

\u5c06<\/strong>bootstrap<\/strong>\u5305\u590d\u5236\u5230<\/strong>assets<\/strong>\u6587\u4ef6\u5939<\/strong><\/p>\n\n\n\n

\u5728\u9ed8\u8ba4\u9875\u9762index.html\u4e2d\uff0c\u5bfc\u5165\u5916\u90e8Bootstrap\uff0c\u6240\u6709\u7ec4\u4ef6\u90fd\u751f\u6548<\/strong>(\u4e00\u6b21\u5f15\u5165\u5168\u5c40\u53ef\u7528(niupi))<\/p>\n\n\n\n

<\/p>\n\n\n\n

<link rel=\"stylesheet\" href=\".\/assets\/bootstrap-3.3.7-dist\/css\/bootstrap.min.css\">\n<\/code><\/pre>\n\n\n\n
\u53d8\u91cf<\/strong><\/h2>\n\n\n\n
\u53d8\u91cf\u540d:[\u7a7a\u683c]\u7c7b\u578b     \u5192\u53f7\u540e\u8981\u6709\u7a7a\u683c<\/strong> <\/p>\n\n\n\n
 aa: boolean;<\/strong><\/p>\n\n\n\n
aa = ‘hello’<\/strong>  \/\/\u76f4\u63a5\u8d4b\u503c! \u4e0d\u9700\u8981\u5b9a\u4e49\u7c7b\u578b niubi    \u5b57\u7b26\u4e32\u63a8\u8350\u4f7f\u7528\u5355\u5f15\u53f7<\/p>\n\n\n\n
\u6570\u636e\u7ed1\u5b9a\uff08\u76f4\u63a5\u53d6\u503c \u5439\u7206\uff01\uff09<\/h2>\n\n\n\n
 \u6570\u636e\u6e90>>\u89c6\u56fe<\/strong> <\/h3>\n\n\n\n
1.\u63d2\u503c\u8868\u8fbe\u5f0f<\/strong>\u7ed1\u5b9a<\/h4>\n\n\n\n
\u5728***.component.ts\u4e2d<\/strong><\/p>\n\n\n\n
 aa = false;<\/strong><\/pre>\n\n\n\n
\u5728<\/strong>***<\/strong>.component.<\/strong>html<\/strong>\u7ed1\u5b9a<\/strong><\/p>\n\n\n\n
<p>{{\u53d8\u91cf\u540d}}<\/p><\/code>  {{aa}}<\/p>\n\n\n\n
 2.\u5c5e\u6027\u7ed1\u5b9a(\u5c06ts\u7684\u6570\u636e\u7ed1\u5b9a\u5230html\u6807\u7b7e\u7684\u5c5e\u6027\u4e0a)<\/strong> <\/h4>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.<\/strong>ts<\/strong>\u4e2d<\/strong><\/p>\n\n\n\n
bb  =  '.\/assets\/img\/logo.png';<\/pre>\n\n\n\n
\u5728<\/strong>***<\/strong>.component.<\/strong>html<\/strong>\u7ed1\u5b9a<\/strong><\/p>\n\n\n\n
<<\/strong>img<\/strong> <\/strong>[<\/strong>src<\/strong>]<\/strong>=\"<\/strong>bb<\/strong>\" \/>   < --   <\/strong>\u7ed1\u5b9a\u5c5e\u6027<\/strong> --><\/strong><\/pre>\n\n\n\n
<input  type=\u201ctext\u201d  [value]=\"bb\" \/> <--   \u7ed1\u5b9a\u5c5e\u6027 --><\/strong><\/pre>\n\n\n\n
 3.style\u6837\u5f0f\u7ed1\u5b9a<\/strong> <\/h4>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.<\/strong>ts<\/strong>\u4e2d<\/strong><\/p>\n\n\n\n
cc  =  'red';<\/strong><\/pre>\n\n\n\n
\u5728<\/strong>***<\/strong>.component.<\/strong>html<\/strong>\u7ed1\u5b9a<\/strong><\/p>\n\n\n\n
 <input type=\"text\" [style.background-color]=\"cc\" \/><\/strong><\/pre>\n\n\n\n
4. class\u6837\u5f0f\u7c7b\u7ed1\u5b9a<\/strong> <\/p>\n\n\n\n
\u5728***.component.css\u4e2d<\/strong> <\/p>\n\n\n\n
  .dd {<\/strong>   background-color: skyblue;<\/strong>   color:orange;<\/strong>  }<\/strong> <\/pre>\n\n\n\n
\u5728***.component.ts\u4e2d<\/strong><\/p>\n\n\n\n
change = true;<\/strong><\/pre>\n\n\n\n
\u5728***.component.html\u7ed1\u5b9a<\/strong><\/p>\n\n\n\n
 <input type=\"text\" [class.dd]= \" change\" \/><\/strong><\/pre>\n\n\n\n
 \u89c6\u56fe>>\u6570\u636e\u6e90<\/strong> <\/p>\n\n\n\n
\/\/\u901a\u5e38\u7528\u4e8e\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u6807\u7b7e\u4e8b\u4ef6\u7ed1\u5b9ats\u4e2d\u7684\u65b9\u6cd5<\/p>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.<\/strong>ts<\/strong>\u6587\u4ef6\u5b9a\u4e49<\/strong>\u65b9\u6cd5<\/strong><\/p>\n\n\n\n
  cc () {<\/strong>  \n        alert(\u201c\u7ed1\u5b9a\u4e8b\u4ef6\u201d);<\/strong>      }<\/strong> <\/pre>\n\n\n\n
\u5728***.component.html\u6587\u4ef6\u4e2d\uff0c\u7ed9\u6309\u94ae\u7684\u5355\u51fb\u4e8b\u4ef6\u7ed1\u5b9acc\u65b9\u6cd5<\/strong><\/p>\n\n\n\n
 \/\/(\u4e8b\u4ef6\u540d\u79f0)=\u201c\u65b9\u6cd5\u540d\uff08\uff09\u201d<\/strong>\n <input type=\u201cbutton\u201d value=\u201c\u70b9\u6211\u8bd5\u8bd5\u201d  (click)=\u201ccc()\u201d><\/strong> <\/pre>\n\n\n\n
\u7ba1\u9053\u64cd\u4f5c\u7b26<\/strong><\/h2>\n\n\n\n
\u7ba1\u9053\u662f\u4e00\u4e2a\u63a5\u6536\u8f93\u5165\u503c\u5e76\u8fd4\u56de\u8f6c\u6362\u7ed3\u679c\u7684\u51fd\u6570\uff0c\u5177\u6709\u591a\u79cd\u8f6c\u6362\u5f62\u5f0f\uff0c\u6bd4\u5982\uff1a\u767e\u5206\u6570\u8f6c\u6362\u3001\u6570\u5b57\u8f6c\u4e3a\u91d1\u989d\u3001\u65e5\u671f\u683c\u5f0f\u7b49\u3002<\/strong><\/p>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.ts<\/strong>\u6587\u4ef6\u5b9a\u4e49\u65e5\u671f<\/strong><\/p>\n\n\n\n
 per = 0.2;<\/strong>\n today =  Date.now();<\/strong>\n salary = 200;<\/strong> <\/pre>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.html<\/strong>\u5728\u4f7f\u7528\u7ba1\u9053\u64cd\u4f5c\u7b26<\/strong><\/p>\n\n\n\n
 \/\/{{\u53d8\u91cf\u540d | \u7ba1\u9053\u64cd\u4f5c\u7b26\u540d }}<\/strong>\n {{per |percent}}  \/\/ \u767e\u5206\u6bd4<\/strong>\n {{ today | date: \u2018yyyy-MM-dd hh:mm:ss\u2019}} \/\/ date\uff1a\u8868\u793a\u65e5\u671f<\/strong>\n {{salary | currency: \u2018CNY\u2019:\u2018symbol-narrow\u2019}} \/\/curreny:\u8868\u793a\u8d27\u5e01<\/strong>\n \/\/CNY:\u8868\u793a\u4eba\u6c11\u5e01 <\/strong>\n \/\/symbol-narrow:\u8868\u793a\u7a84\u7b26\u53f7,\u53bb\u6389CN<\/strong> <\/pre>\n\n\n\n
\u5b89\u5168\u5bfc\u822a\u64cd\u4f5c\u7b26<\/strong><\/h2>\n\n\n\n
\u5b89\u5168\u5bfc\u822a\u64cd\u4f5c\u7b26\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u7528\u6765<\/strong>\u4fdd\u62a4<\/strong>\u51fa\u73b0\u5728<\/strong>\u5c5e\u6027\u8def\u5f84\u4e2d\u7684<\/strong>null<\/strong>\u548c<\/strong>undefined<\/strong>\u503c<\/strong>\uff0c\u5f53\u8868\u8fbe\u5f0f\u9047\u5230\u7a7a\u503c\u65f6\u8df3\u8fc7\uff0c\u540e\u9762\u7684\u4ee3\u7801\u53ef\u4ee5<\/strong>\u6b63\u5e38\u6267\u884c<\/strong>\u3002<\/strong><\/p>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.ts<\/strong>\u4e2d<\/strong><\/p>\n\n\n\n
hh = 20;<\/strong><\/pre>\n\n\n\n
\u5728***.component.html\u6587\u4ef6\u4e2d\u83b7\u53d6\u4e0d\u5b58\u5728\u7684\u5bf9\u8c61\u7684\u5c5e\u6027<\/strong><\/p>\n\n\n\n
 <!-- {{p.name}},\u629b\u51fa\u5f02\u5e38\uff0c\u6574\u4e2a\u9875\u9762\u505c\u6b62\u6267\u884c\uff0c\u9875\u9762\u4e0d\u663e\u793a  -- ><\/strong>\n {{p?.name}}<\/strong>\n \/\/\u7a0b\u5e8f\u4e0d\u4f1a\u4e2d\u65ad\uff0c\u4e0b\u9762\u4ee3\u7801\u53ef\u4ee5\u6b63\u5e38\u6267\u884c<\/strong>\n {{hh}}<\/strong> <\/pre>\n\n\n\n
*ngFor\u6307\u4ee4<\/strong><\/h2>\n\n\n\n
n<\/strong>gFor<\/strong>\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u53ef\u4ee5\u5faa\u73af\u6570\u7ec4\uff0c\u7c7b\u4f3c\u4e8e<\/strong>for<\/strong>\u5faa\u73af<\/strong>,<\/strong>\u53ef\u4ee5\u5c06<\/strong>\u6570\u7ec4<\/strong>\u4e2d\u7684<\/strong>\u6570\u636e<\/strong>\uff0c<\/strong>\u5faa\u73af\u663e\u793a\u5230\u9875\u9762\u4e0a<\/strong><\/p>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.ts<\/strong>\u6587\u4ef6\u5b9a\u4e49\u6570\u7ec4<\/strong><\/p>\n\n\n\n
 nameArray: string[ ] = [ 'zhangsan' , 'lisi' , 'wangwu' ];<\/strong> <\/pre>\n\n\n\n
\u5728<\/strong>***.component.html<\/strong>\u4e2d\u4f7f\u7528<\/strong>ngFor<\/strong>\u5faa\u73af\u663e\u793a\u6570\u7ec4\u4e2d\u7684\u503c<\/strong><\/p>\n\n\n\n
 <ul><\/strong>\n    <!\u2013 \u6570\u7ec4\u4e2d\u6709\u51e0\u4e2a\u5143\u7d20\uff0c\u5c31\u5faa\u73af\u51e0\u6b21\uff0c\u6bcf\u6b21\u5faa\u73af\u90fd\u751f\u6210\u4e00\u4e2a<li>--><\/strong>\n    <!\u2013 let  \u53d8\u91cf\u540d  of  \u6570\u7ec4\u540d --><\/strong>\n    <!\u2013 \u6bcf\u5faa\u73af\u4e00\u6b21\uff0c\u4ece\u6570\u7ec4\u4e2d\u53d6\u51fa\u4e00\u4e2a\u5143\u7d20\uff0c\u5b58\u5165\u53d8\u91cf\u4e2d--><\/strong>\n     <li *ngFor=\"let  name of nameArray\"><\/strong>\n       <!\u2013 \u7ed1\u5b9a\u6bcf\u6b21\u5faa\u73af\u5230\u7684\u53d8\u91cf\u503c--><\/strong>\n       {{name}}<\/strong>\n     <\/li><\/strong>\n <\/ul><\/strong> <\/pre>\n\n\n\n
*ngFor\u6307\u4ee4\u83b7\u53d6\u7d22\u5f15<\/strong><\/h3>\n\n\n\n
\u4f7f\u7528<\/strong>index<\/strong>\u83b7\u53d6\u6570\u7ec4\u7684<\/strong>\u7d22\u5f15\u503c<\/strong><\/p>\n\n\n\n
\u5728***.component.ts\u6587\u4ef6\u5b9a\u4e49\u65e5\u671f<\/strong><\/p>\n\n\n\n
 nameArray: string[ ] = [ 'zhangsan' , 'lisi' , 'wangwu' ];<\/strong> <\/pre>\n\n\n\n
\u5728<\/strong>***.component.html<\/strong>\u83b7\u53d6\u7d22\u5f15\u503c<\/strong><\/p>\n\n\n\n
 <ul><\/strong>\n     <!--  index\u83b7\u53d6\u6570\u7ec4\u7684\u7d22\u5f15\u503c  --><\/strong>\n     <!--  let \u53d8\u91cf\u540d  =  index  --><\/strong>\n     <li *ngFor=\"let  name of nameArray;let i = index\"><\/strong>\n       {{i}}\uff1a {{name}}<\/strong>\n     <\/li><\/strong>\n <\/ul><\/strong> <\/pre>\n\n\n\n
*ngIf\u6307\u4ee4<\/strong><\/h2>\n\n\n\n
ngIf<\/strong>\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u6761\u4ef6\u5224\u65ad<\/strong><\/p>\n\n\n\n
*<\/strong>ngIf<\/strong>\u7684\u7684\u8bed\u6cd5\u683c\u5f0f<\/strong><\/p>\n\n\n\n
  <span *ngIf=\u201c\u6761\u4ef6\u8868\u8fbe\u5f0f\" >\u2026<\/span><\/strong> <\/pre>\n\n\n\n
\u6761\u4ef6\u8868\u8fbe\u5f0f\u8fd4\u56de<\/strong>true<\/strong>\uff0c\u663e\u793a\u5143\u7d20<\/strong><\/p>\n\n\n\n
\u6761\u4ef6\u8868\u8fbe\u5f0f\u8fd4\u56de<\/strong>false<\/strong>\uff0c\u4e0d\u663e\u793a\u5143\u7d20<\/strong><\/p>\n\n\n\n
\u5728***.component.ts\u6587\u4ef6\u5b9a\u4e49\u6570\u7ec4<\/strong><\/p>\n\n\n\n
 nameArray: string[ ] = [ 'zhangsan' , 'lisi' , 'wangwu' ];<\/strong> <\/pre>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.html<\/strong>\u5728\u4f7f\u7528<\/strong>*<\/strong>ngIf<\/strong>\u6307\u4ee4<\/strong><\/p>\n\n\n\n
<ul ><\/strong>\n    <li *ngFor=\"let name of aa;let i = index\">        <\/strong>\n         <span *ngIf=\"i%2==0\" style=\"background-color: skyblue;\"><\/strong>\n             {{name}}<\/strong>\n         <\/span><\/strong>\n         <span *ngIf=\"i%2!=0\" style=\"background-color:orange;\"><\/strong>\n             {{name}}<\/strong>\n         <\/span><\/strong>\n     <\/li><\/strong>\n <\/ul><\/strong> <\/pre>\n\n\n\n
ngSwitch\u6307\u4ee4<\/strong><\/h2>\n\n\n\n
\u8bed\u6cd5\u683c\u5f0f:<\/p>\n\n\n\n
 <span [ngSwitch]=\u201c\u8868\u8fbe\u5f0f\">  <\/strong>\n         <span  *ngSwitchCase=\u201c\u503c1\">\u2026<\/span> <\/strong>\n         <span  *ngSwitchCase=\u201c\u503c2\">\u2026<\/span><\/strong>\n         <span  *ngSwitchCase=\u201c\u503c3\">\u2026<\/span><\/strong>\n         \u2026.<\/strong>\n         <span  *ngSwitchDefault>\u2026<\/span><\/strong>\n <\/span><\/strong> <\/pre>\n\n\n\n
1.<\/strong>\u663e\u793a\u4e0e\u8868\u8fbe\u5f0f\u5339\u914d\u7684\u5143\u7d20<\/strong><\/p>\n\n\n\n
2.<\/strong>\u5982\u679c\u6ca1\u6709\u5339\u914d\u7684\u503c\u663e\u793a\u9ed8\u8ba4\u9879<\/strong><\/p>\n\n\n\n
 <span [ngSwitch]=\"bb\">  <\/strong>\n         <span  *ngSwitchCase=\"1\">\u5df2\u652f\u4ed8<\/span> <\/strong>\n         <span  *ngSwitchCase=\"2\">\u5df2\u53d1\u8d27<\/span><\/strong>\n         <span  *ngSwitchCase=\"3\">\u5df2\u6536\u8d27<\/span><\/strong>\n         <span  *ngSwitchDefault>\u4e0d\u6b63\u5e38<\/span><\/strong>\n <\/span><\/strong> <\/pre>\n\n\n\n
 \u53cc\u5411\u6570\u636e\u7ed1\u5b9a<\/strong> <\/h2>\n\n\n\n
\u6570\u636e\u6e90<\/strong>(<\/strong>ts<\/strong>)<\/strong>\u7ed1\u5b9a\u81f3\u89c6\u56fe\uff08<\/strong>html<\/strong>\uff09<\/strong><\/p>\n\n\n\n
\u89c6\u56fe\uff08html\uff09\u7ed1\u5b9a\u81f3\u6570\u636e\u6e90(ts)<\/strong><\/p>\n\n\n\n
\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u4e4b\u524d\uff0c\u9700\u8981\u5728\u6839\u6a21\u5757<\/strong>app.modules.ts<\/strong>\u4e2d\u5f15\u5165<\/strong>FormsModule<\/strong>\u8868\u5355\u6a21\u5757<\/strong>,<\/strong>\u6240\u6709\u7684\u7ec4\u4ef6\u90fd\u751f\u6548<\/strong><\/p>\n\n\n\n
 \/\/ \u5bfc\u5165\uff08\u5f15\u5165\uff09\u8868\u5355\u6a21\u5757<\/strong>\n import { FormsModule } from '@angular\/forms';<\/strong>\n \u2026..<\/strong>\n @NgModule({<\/strong>\n \u2026\u2026<\/strong>\n      imports: [<\/strong>\n     BrowserModule,<\/strong>\n     AppRoutingModule,<\/strong>\n     \/\/ \u5728\u6a21\u5757\u7684\u88c5\u9970\u5668\u4e2d\u5bfc\u5165\u8868\u5355\u6a21\u5757<\/strong>\n     FormsModule<\/strong>\n   ]<\/strong> <\/pre>\n\n\n\n
\u5728***.component.ts\u6587\u4ef6\u4e2d<\/strong><\/p>\n\n\n\n
 num1 = 2;<\/strong>\n num2 = 3;<\/strong>\n dd() {<\/strong>\n     alert(  this.num1 + this.num2 );<\/strong>\n }<\/strong> <\/pre>\n\n\n\n
\u5728<\/strong>***.component.html<\/strong>\u6587\u4ef6\u4e2d<\/strong><\/p>\n\n\n\n
 <input type=\"text\"  [(ngModel)]=\"num1\" \/>  <br \/><\/strong>\n <input type=\"text\"  [(ngModel)]=\"num2\" \/>  <br \/><\/strong>\n <input type=\"button\" value=\"\u6c42\u548c\" (click)=\"dd()\" \/><\/strong> <\/pre>\n\n\n\n
Number<\/strong>\uff08<\/strong>\u2019123\u2019<\/strong>\uff09\uff1b<\/strong>\/\/<\/strong>\u5c06\u5b57\u7b26\u4e32\u8f6c\u4e3a<\/strong>number<\/strong>\u7c7b\u578b<\/strong><\/p>\n\n\n\n
Angular\u8868\u5355\u63d0\u4ea4\u6570\u636e<\/strong><\/h2>\n\n\n\n
\u6dfb\u52a0<\/strong>ngForm<\/strong>\u6307\u4ee4\uff1a<\/strong>#<\/strong>\u53d8\u91cf\u540d<\/strong>=<\/strong>\n\u201c <\/strong>ngForm<\/strong>\u201d<\/strong><\/p>\n\n\n\n
\u7ed1\u5b9a\u63d0\u4ea4\u4e8b\u4ef6\uff1a<\/strong>\uff08<\/strong>ngSubmit<\/strong>\uff09<\/strong>=<\/strong>\u201c\u65b9\u6cd5\u540d<\/strong>(<\/strong>\u53d8\u91cf\u540d<\/strong>.value)<\/strong>\u201d<\/strong><\/p>\n\n\n\n
\u8868<\/strong>\u5355\u7ec4\u4ef6\u5fc5\u987b\u8bbe\u7f6e<\/strong>name<\/strong>\u5c5e\u6027\uff0c\u5fc5\u987b\u4f7f\u7528<\/strong>ngModel<\/strong>\u6307\u4ee4<\/strong><\/p>\n\n\n\n
\u5fc5\u987b\u4f7f\u7528<\/strong>submit<\/strong>\u63d0\u4ea4\u6309\u94ae<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
 <form #f=\"ngForm\" (ngSubmit)=\"ff(f.value)\"><\/strong>\n     <input type=\"text\"  name=\"num1\" ngModel \/>  <br \/><\/strong>\n     <input type=\"text\"  name=\"num2\" ngModel \/>  <br \/><\/strong>\n     <input type=\"submit\" value=\"\u63d0\u4ea4\" ><\/strong>\n  <\/form><\/strong> <\/pre>\n\n\n\n
\u5728<\/strong>***.<\/strong>component.ts<\/strong>\u4e2d\uff0c\u6dfb\u52a0\u63d0\u4ea4\u4e8b\u4ef6\u7ed1\u5b9a\u7684\u65b9\u6cd5<\/strong><\/p>\n\n\n\n
 \/\/\u6dfb\u52a0\u53c2\u6570\u63a5\u6536\u4f20\u8fc7\u6765\u7684\u8868\u5355\u6570\u636e <\/strong>\n ff(data: any) {<\/strong>\n       alert(Number(data.num1) + Number(data.num2));<\/strong>\n }<\/strong> <\/pre>\n\n\n\n
\u8868\u5355\u9a8c\u8bc1<\/strong><\/h3>\n\n\n\n
\n  \u540d\u79f0<\/strong>\n  <\/td>\n  \u8bf4\u660e<\/strong>\n  <\/td><\/tr>
\n  required<\/strong>\n  <\/td>\n  \u8bbe\u7f6e\u8868\u5355\u63a7\u4ef6\u503c\u662f\u975e\u7a7a\u7684<\/strong>\n  <\/td><\/tr>
\n  email<\/strong>\n  <\/td>\n  \u8bbe\u7f6e\u8868\u5355\u63a7\u4ef6\u503c\u7684\u683c\u5f0f\u662f\u7535\u5b50\u90ae\u7bb1<\/strong>\n  <\/td><\/tr>
\n  minlength<\/strong>\n  <\/td>\n  \u8bbe\u7f6e\u8868\u5355\u63a7\u4ef6\u503c\u7684\u6700\u5c0f\u957f\u5ea6<\/strong>\n  <\/td><\/tr>
\n  maxlength<\/strong>\n  <\/td>\n  \u8bbe\u7f6e\u8868\u5355\u63a7\u4ef6\u503c\u7684\u6700\u5927\u957f\u5ea6<\/strong>\n  <\/td><\/tr>
\n  pattern<\/strong>\n  <\/td>\n  \u8bbe\u7f6e\u8868\u5355\u63a7\u4ef6\u503c\u5fc5\u987b\u5339\u914d<\/strong>pattern<\/strong>\u5bf9\u5e94\u7684\u6b63\u5219\u8868\u8fbe\u5f0f<\/strong>\n  <\/td><\/tr><\/tbody><\/table>\n\n\n\n
\u901a\u8fc7\u4e3a<\/strong>ngModel<\/strong>\u8bbe\u7f6e<\/strong>\u53d8\u91cf\u540d<\/strong>\uff0c\u901a\u8fc7\u53d8\u91cf\u540d\u6765\u67e5\u770b\u8be5\u63a7\u4ef6\u7684<\/strong>\u9a8c\u8bc1\u72b6\u6001<\/strong>\u3002<\/strong><\/p>\n\n\n\n
\u8bbe\u7f6e\u9a8c\u8bc1\u89c4\u5219\uff1a\u975e\u7a7a\n<\/strong><\/p>\n\n\n\n
 <input type=\"text\" name=\"num1\" ngModel #one=\"ngModel\u201c required  \/> <\/strong> <\/pre>\n\n\n\n
\u6bcf\u5f53\u8868\u5355\u63a7\u4ef6\u4e2d\u7684\u503c\u53d1\u751f\u53d8\u5316\u65f6<\/strong>\uff0c<\/strong>Angular\n<\/strong>\u5c31\u4f1a\u8fdb\u884c\u9a8c\u8bc1<\/strong><\/p>\n\n\n\n
\u9a8c\u8bc1\u65e0\u6548\uff1a<\/strong>invalid<\/strong>\u4e3a<\/strong>true<\/strong><\/p>\n\n\n\n
 <span *ngIf=\u201cone.invalid\" style=\"color:red;\"><\/strong>\n        \u4f60\u8f93\u5165\u7684\u503c\u65e0\u6548<\/strong>\n     <\/span><\/strong> <\/pre>\n\n\n\n
 <input type=\"text\" name=\"num1\" ngModel #two=\"ngModel\" required email minlength=\"6\" maxlength=\"12\" \/><\/strong>\n <span *ngIf=\u201ctwo.errors?.required\" style=\"color:red;\"><\/strong>\n         \u4e0d\u80fd\u4e3a\u7a7a<\/strong>\n <\/span><\/strong>\n <span *ngIf=\u201ctwo.errors?.minlength\" style=\"color:red;\"><\/strong>\n        \u957f\u5ea6\u81f3\u5c116\u4f4d<\/strong>\n <\/span><\/strong>\n <span *ngIf=\u201ctwo.errors?.maxlength\" style=\"color:red;\"><\/strong>\n        \u957f\u5ea6\u6700\u591a12\u4f4d<\/strong>\n <\/span><\/strong>\n <span *ngIf=\u201ctwo.errors?.email\" style=\"color:red;\"><\/strong>\n        \u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e<\/strong>\n <\/span><\/strong> <\/pre>\n\n\n\n
\u6b63\u5219\u8868\u8fbe\u5f0f\u9a8c\u8bc1<\/strong><\/h3>\n\n\n\n
 <input type=\"text\" name=\"num2\" ngModel #two=\"ngModel\" pattern=\"^[0-9]*$\"\/> <\/strong>\n \n <span *ngIf=\"two.errors?.pattern\" style=\"color:red;\"><\/strong>\n     \u4f60\u8f93\u5165\u7684\u6570\u636e\u683c\u5f0f\u4e0d\u6b63\u786e<\/strong>\n <\/span><\/strong> <\/pre>\n\n\n\n
\u8868\u5355\u6837\u5f0f<\/strong><\/h3>\n\n\n\n
\u8868<\/strong>\u5355\u63a7\u4ef6<\/strong>CSS<\/strong>\u7c7b<\/strong>\u540d\u4f1a\u6839\u636e\u63a7\u4ef6\u72b6\u6001\u7684\u53d8\u5316\u800c\u81ea\u52a8\u53d8\u5316<\/strong><\/p>\n\n\n\n
\n  \u540d\u79f0<\/strong>\n  <\/td>\n  \u4e3a<\/strong>true<\/strong>\u65f6\u7684<\/strong>css<\/strong>\u7c7b<\/strong>\n  <\/td>\n  \u4e3a<\/strong>false<\/strong>\u65f6\u7684<\/strong>css<\/strong>\u7c7b<\/strong>\n  <\/td><\/tr>
\n  \u63a7\u4ef6\u662f\u5426\u8bbf\u95ee\u8fc7<\/strong>\n  <\/td>\n  ng<\/strong>-touched<\/strong>\n  <\/td>\n  ng<\/strong>-untouched<\/strong>\n  <\/td><\/tr>
\n  \u63a7\u4ef6\u7684\u503c\u662f\u5426\u53d8\u5316<\/strong>\n  <\/td>\n  ng<\/strong>-dirty<\/strong>\n  <\/td>\n  ng<\/strong>-pristine<\/strong>\n  <\/td><\/tr>
\n  \u63a7\u4ef6\u7684\u503c\u662f\u5426\u6709\u6548<\/strong>\n  <\/td>\n  ng<\/strong>-valid<\/strong>\n  <\/td>\n  ng<\/strong>-invalid<\/strong>\n  <\/td><\/tr><\/tbody><\/table>\n\n\n\n
  input.ng-valid{<\/strong>\n     border:3px solid #42A948;<\/strong>\n  }<\/strong>\n  input.ng-invalid{<\/strong>\n    border:3px solid #a94442;<\/strong>\n }<\/strong> <\/pre>\n\n\n\n
Angular\u8def\u7531<\/strong><\/h2>\n\n\n\n
Angular\n<\/strong>\u7684<\/strong>\u8def\u7531\u80fd<\/strong>\u8ba9\u7528\u6237<\/strong>\u4ece\u4e00\u4e2a\u89c6\u56fe<\/strong>\u5bfc\u822a<\/strong>\u5230<\/strong>\u53e6\u4e00\u4e2a\u89c6\u56fe<\/strong>\u3002<\/strong><\/p>\n\n\n\n
\u5728<\/strong>Angular<\/strong>\u4e2d\u4f7f\u7528\u8def\u7531\u5b9e\u73b0<\/strong>\u8df3\u8f6c<\/strong><\/p>\n\n\n\n
 \u521b\u5efa\u9879\u76ee\u65f6\u81ea\u52a8\u521b\u5efa\u4e86\u8def\u7531\u6a21\u5757\uff08app-routing.module.ts\uff09<\/strong> <\/pre>\n\n\n\n
\/\/ \u5bfc\u5165\u9700\u8981\u52a0\u8f7d\u7684\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u4ece\u6839\u6a21\u5757\u4e2d\u590d\u5236<\/strong> (\u81ea\u52a8\u751f\u6210)\n  {path: 'index\/:uname', component: IndexComponent}<\/pre>\n\n\n\n
<router-outlet><\/router-outlet><\/strong><\/p>\n\n\n\n
<router-outlet><\/strong>\u626e\u6f14\u4e00\u4e2a<\/strong>\u5360\u4f4d\u7b26<\/strong>\u7684\u89d2\u8272\uff0c\u6807\u51fa\u4e00\u4e2a<\/strong>\u4f4d\u7f6e<\/strong>\uff0c\u8def\u7531\u5bf9\u5e94\u7684\u7ec4\u4ef6\u663e\u793a\u5230\u8fd9\u4e2a\u4f4d\u7f6e<\/strong><\/p>\n\n\n\n
\u5728\u6839\u7ec4\u4ef6<\/strong>app.component.html<\/strong>\u6587\u4ef6\u4e2d<\/strong><\/p>\n\n\n\n
\u5728\u5730\u5740\u680f\u8f93\u5165\uff1a<\/strong>\/index<\/strong><\/p>\n\n\n\n
\u8def\u7531\u5c31\u4f1a\u5339\u914d\u5230<\/strong>path<\/strong>\u4e3a<\/strong>index<\/strong>\u7684\u8def\u7531<\/strong><\/p>\n\n\n\n
\u5e76\u5728\u6839\u7ec4\u4ef6\u4e2d<\/strong><r<\/strong>outer-outlet><\/strong>\u4f4d\u7f6e\u663e\u793a<\/strong>index<\/strong>\u7ec4\u4ef6\u3002<\/strong><\/p>\n\n\n\n
\u5728\u6839\u7ec4\u4ef6\u4e2d\u4e0d\u8981\u624b\u52a8\u8c03\u7528\u7ec4\u4ef6\u4e86\uff0c\u53bb\u6389<\/strong><app-<\/strong>\u7ec4\u4ef6\u540d\u79f0<\/strong>> <\/app-<\/strong>\u7ec4\u4ef6\u540d\u79f0<\/strong>><\/strong><\/p>\n\n\n\n
\u4ee3\u7801\u8c03\u7528\u8def\u7531<\/strong><\/h3>\n\n\n\n
\u5728\u6784\u9020\u51fd\u6570constructor(private router:Router)\u4e2d\u6ce8\u5165\u8def\u7531\u5668,\u6ce8\u5165\u65f6\u5fc5\u987b\u6dfb\u52a0\u8bbf\u95ee\u4fee\u9970\u7b26<\/strong><\/p>\n\n\n\n
 import { Router } from \u2018@angular\/router\u2019;  \/\/\u5bfc\u5165\u8def\u7531\u5668<\/strong>\n \u2026.<\/strong>\n export class LoginComponent implements OnInit {<\/strong>\n \n   constructor(private router:Router) { }    \/\/\u6ce8\u5165\u8def\u7531\u5668<\/strong>\n \n   login(data: any){<\/strong>\n      if(data.username==\"zhangsan\" &&data.password==\"123456\"){<\/strong>\n           \/\/ \u4f7f\u7528\u8def\u7531\u5668\u5bfc\u822a\u5230\u9996\u9875<\/strong>\n           this.router.navigate([\u2018\/index\u2019]);<\/strong>\n           <\/strong>\n      }<\/strong>\n }<\/strong> <\/pre>\n\n\n\n
\u9ed8\u8ba4\u8def\u7531<\/strong><\/h3>\n\n\n\n
\u5f53 <\/strong>path\n<\/strong>\u4e3a\u7a7a<\/strong>\u65f6\u91cd\u5b9a\u5411<\/strong>\u5230<\/strong>\/login<\/strong>\u8def\u7531<\/strong><\/p>\n\n\n\n
 const routes: Routes = [  <\/strong>\n    \u2026..<\/strong>\n   {path:\u2018 \u2019,redirectTo:\u2018\/login\u2018, pathMatch: 'full'}<\/strong>\n \n ]; <\/strong> \n\/\/redirectTo\uff1a\u91cd\u5b9a\u5411<\/strong>\n\/\/pathMatch\uff1a\u8def\u5f84\u5339\u914d\u65b9\u5f0f\uff0cfull\u5b8c\u5168\u5339\u914d<\/strong> <\/pre>\n\n\n\n
routerLink\u6307\u4ee4<\/strong>(A\u6807\u7b7e?)<\/h3>\n\n\n\n
 <ul> <\/strong>\n      <li><a [routerLink]=\u201c[\u2018\/index\u2019]\u201d>\u9996\u9875<\/a><\/li><\/strong>\n      <li><a [routerLink]=\u201c[\u2018\/login\u2019]\u201d>\u767b\u5f55<\/a><\/li><\/strong>\n <\/ul><\/strong> <\/pre>\n\n\n\n
\u8def\u7531path\u4f20\u9012\u53c2\u6570<\/strong><\/h3>\n\n\n\n
 const routes: Routes = [<\/strong>\n {path:'main',component:MainComponent},<\/strong>\n {path:'login',component:LoginComponent},<\/strong>\n \/\/  \/:\u53c2\u6570\u540d<\/strong>\n {path:\u2018first\/:name',component:FirstComponent}\n ];<\/strong> <\/pre>\n\n\n\n
ActivatedRoute<\/strong>\u6d3b\u52a8\u8def\u7531\uff0c\u53ef\u4ee5\u4fdd\u5b58\u5f53\u524d\u8def\u7531<\/strong>\u4f20\u9012<\/strong>\u7684\u4fe1\u606f<\/strong><\/p>\n\n\n\n
 \/\/\u5bfc\u5165\u6d3b\u52a8\u8def\u7531<\/strong>\n import {ActivatedRoute} from '@angular\/router';<\/strong>\n \/\/\u5728\u6784\u9020\u51fd\u6570\u4e2d\u6ce8\u5165\u6d3b\u52a8\u8def\u7531<\/strong>\n constructor(private route:ActivatedRoute) { }<\/strong> <\/pre>\n\n\n\n
 routerLink\u4f20\u503c<\/strong> (a\u6807\u7b7e\u4f20\u503c \u725bB)<\/h3>\n\n\n\n
  <a [routerLink]=\u201c[\u2018\/first\u2019,\u2019\u5f20\u4e09\u2019]\u201d>\u7b2c\u4e00\u4e2a<\/a><\/strong> <\/pre>\n\n\n\n
 \u4ee3\u7801\u4f20\u503c<\/strong> <\/h3>\n\n\n\n
 this.router.navigate([\"\/index\", \u2019\u5f20\u4e09\u2019 ]);<\/strong> <\/pre>\n\n\n\n
\u53ef\u89c2\u5bdf\u5bf9\u8c61(Observable)<\/strong><\/h2>\n\n\n\n
\u901a\u8fc7<\/strong>\u6d3b\u52a8\u8def\u7531<\/strong>\u7684<\/strong>paramMap<\/strong>\u5c5e\u6027\u83b7\u53d6\u4f20\u9012\u7684\u6570\u636e<\/strong><\/p>\n\n\n\n
paramMap<\/strong>\u5c5e\u6027\u662f\u4e00\u4e2a<\/strong>\u53ef\u89c2\u5bdf\u5bf9\u8c61<\/strong>(Observable<\/strong>)<\/strong>\u5bf9\u8c61<\/strong><\/p>\n\n\n\n
\u53ef<\/strong>\u89c2\u5bdf\u5bf9\u8c61\u652f\u6301\u5728\u5e94\u7528\u4e2d\u7684<\/strong>\u53d1\u5e03\u8005<\/strong>\u548c<\/strong>\u8ba2\u9605\u8005<\/strong>\u4e4b\u95f4<\/strong>\u4f20\u9012<\/strong>\u6d88\u606f<\/strong><\/p>\n\n\n\n
\u83b7\u53d6\u4f20\u9012\u7684\u6d88\u606f\uff0c\u5c31\u8981\u8c03\u7528<\/strong>subscribe(<\/strong>\u533f\u540d\u51fd\u6570<\/strong>)<\/strong> <\/strong>\u65b9\u6cd5<\/strong><\/p>\n\n\n\n
 ngOnInit() {<\/strong>\n     this.route.paramMap.subscribe(<\/strong>\n         \/\/\u6570\u636e\u4f20\u9012\u5230data\u4e2d<\/strong>\n          function(data){      <\/strong>\n                 \/\/\u6839\u636e\u53c2\u6570\u540d\u79f0\u83b7\u53d6\u4f20\u9012\u7684\u503c   <\/strong>\n                alert(data.get(\"name\"));   <\/strong>\n           }<\/strong>\n      );  <\/strong>\n   }<\/strong> <\/pre>\n\n\n\n
\u7bad\u5934\u51fd\u6570<\/strong><\/h2>\n\n\n\n
 \u533f\u540d\u51fd\u6570<\/strong> <\/h3>\n\n\n\n
 function\uff08\u53c2\u65701,\u53c2\u65702, \u2026.\u53c2\u6570n\uff09{<\/strong>\n    \u2026\u2026..<\/strong>\n }<\/strong> <\/pre>\n\n\n\n
\u7bad\u5934\u51fd\u6570\u5c31\u662f\u7b80\u5316\u4e86\u7684\u533f\u540d\u51fd\u6570<\/strong><\/p>\n\n\n\n
 \/\/\u5b8c\u6574\u7bad\u5934\u51fd\u6570<\/strong>\n (\u53c2\u65701, \u53c2\u65702, \u2026, \u53c2\u6570N) => { \u51fd\u6570\u4e3b\u4f53}<\/strong>\n \/\/\u53ea\u6709\u4e00\u6761\u8bed\u53e5\uff0c\u5927\u62ec\u53f7\u7701\u7565<\/strong>\n (\u53c2\u65701, \u53c2\u65702, \u2026, \u53c2\u6570N) =>\u8868\u8fbe\u5f0f<\/strong>\n \/\/ \u5f53\u53ea\u6709\u4e00\u4e2a\u53c2\u6570\u65f6\uff0c\u5706\u62ec\u53f7\u662f\u53ef\u9009\u7684\uff1a<\/strong>\n \u5355\u4e00\u53c2\u6570 => {\u51fd\u6570\u4e3b\u4f53}<\/strong>\n \/\/ \u53ea\u6709\u4e00\u6761\u8bed\u53e5\uff0c\u4e00\u4e2a\u53c2\u6570<\/strong>\n \u5355\u4e00\u53c2\u6570 =>\u8868\u8fbe\u5f0f<\/strong> <\/pre>\n\n\n\n
 \u4f7f\u7528\u7bad\u5934\u51fd\u6570\u7b80\u5316\u533f\u540d\u51fd\u6570<\/strong> <\/h4>\n\n\n\n
 \/\/\u6ce8\u5165\u6d3b\u52a8\u8def\u7531<\/strong>\n constructor(private route:ActivatedRoute) { }<\/strong>\n   aa:string;<\/strong>\n   ngOnInit() {<\/strong>\n      this.route.paramMap.subscribe(data=>this.aa=data.get(\u2018name\u2019));    <\/strong>\n   }<\/strong> <\/pre>\n\n\n\n
Get\u4f20\u503c<\/strong><\/h2>\n\n\n\n
Get<\/strong>\u4f20\u503c\uff0c\u4f7f\u7528<\/strong>queryParams<\/strong><\/p>\n\n\n\n
<a [routerLink]=\"['\/sample']\" [queryParams]=\"{id:3,name:'\u5f20\u4e09'}\">\u9875\u9762\u56db<\/a><\/strong> <\/pre>\n\n\n\n
\u4ee3\u7801\u4f20\u503c<\/strong><\/p>\n\n\n\n
this.router.navigate([\"\/sample\"],{queryParams: {id: 123,name:'zhangsan'}})<\/strong> <\/pre>\n\n\n\n
\u4f7f\u7528\u6d3b\u52a8\u8def\u7531\u7684<\/strong>queryParamMap<\/strong>\u83b7\u53d6\u6570\u636e<\/strong><\/p>\n\n\n\n
queryParamMap<\/strong>\u662f\u4e00\u4e2a<\/strong>\u53ef\u89c2\u5bdf\u5bf9\u8c61<\/strong>(Observable)<\/strong>\u5bf9\u8c61<\/strong><\/p>\n\n\n\n
 \/\/\u6ce8\u5165\u6d3b\u52a8\u8def\u7531<\/strong>\n constructor(private route:ActivatedRoute) { }<\/strong>\n   name:string=\"\";<\/strong>\n   ngOnInit() {<\/strong>\n  this.route.queryParamMap.subscribe(<\/strong>\n       data=>{ <\/strong>\n             alert(data.get(\"name\")); <\/strong>\n             alert(data.get('id'))<\/strong>\n        }<\/strong>\n       );  <\/strong>\n  }<\/strong> <\/pre>\n\n\n\n
HttpClient\u540e\u53f0\u901a\u8baf<\/strong><\/h2>\n\n\n\n
\u8981\u60f3\u4f7f\u7528 <\/strong>HttpClient<\/strong>\uff0c<\/strong>\u5fc5\u987b\u5728\u6839\u6a21\u5757\uff08<\/strong>app.module.ts<\/strong>\uff09<\/strong>\u4e2d<\/strong>\u5bfc<\/strong>\u5165 <\/strong>Angular\n<\/strong>\u7684\n<\/strong>HttpClientModule<\/strong>\u6a21\u5757<\/strong><\/p>\n\n\n\n
 import { HttpClientModule } from '@angular\/common\/http';<\/strong>\n @NgModule({<\/strong>\n   \u2026.<\/strong>\n   imports: [<\/strong>\n     BrowserModule,<\/strong>\n     HttpClientModule<\/strong>\n   ],<\/strong>\n   \u2026.<\/strong>\n })<\/strong> <\/pre>\n\n\n\n
\u5728\u7ec4\u4ef6\u4e2d\u5bfc\u5165HttpClient<\/strong><\/p>\n\n\n\n
\u5e76\u5728\u7ec4\u4ef6\u7684\u6784\u9020\u51fd\u6570\u4e2d\u6ce8\u5165HTTP\u670d\u52a1<\/strong><\/p>\n\n\n\n
 import { HttpClient } from '@angular\/common\/http';<\/strong>\n \n export class SampleComponent implements OnInit {<\/strong>\n \n   constructor(private http: HttpClient) { }<\/strong>\n \n   ngOnInit() {<\/strong>\n       \u2026..<\/strong>\n   }<\/strong>\n \n }<\/strong> <\/pre>\n\n\n\n
\u5411\u540e\u53f0\u53d1\u9001\u6570\u636e<\/strong><\/h3>\n\n\n\n
\u4f7f\u7528<\/strong>httpClient<\/strong>\u7684<\/strong>post<\/strong>()<\/strong>\u65b9\u6cd5<\/strong>\u5411<\/strong>\u540e\u53f0\u53d1\u9001\u6570\u636e<\/strong>\u3002<\/strong><\/p>\n\n\n\n
post<\/strong>()<\/strong>\u65b9\u6cd5\u8fd4\u56de\u4e00\u4e2a<\/strong>\u53ef\u89c2\u5bdf\u5bf9\u8c61<\/strong>(Observable<\/strong>\u5bf9\u8c61<\/strong>)<\/strong><\/p>\n\n\n\n
\u83b7\u53d6\u6570\u636e\uff0c\u5c31\u8981\u8c03\u7528<\/strong>subscribe(<\/strong>\u7bad\u5934\u51fd\u6570<\/strong>)<\/strong> <\/strong>\u65b9\u6cd5<\/strong><\/p>\n\n\n\n
 url = \u2018http:\/\/localhost:8080\/StuManager\/stu\/addStu\u2019; \/\/\u540e\u53f0\u5730\u5740<\/strong>\n \n   add(a: any){    <\/strong>\n     \/\/post(\u540e\u53f0\u5730\u5740\uff0c\u53d1\u9001\u7684\u6570\u636e) <\/strong>\n     this.http.post(this.url,a).subscribe(data=>{<\/strong>\n         \/\/ data\u662f\u540e\u53f0\u8fd4\u56de\u7684\u5f71\u54cd\u884c\u6570  <\/strong>\n        if(data>0){<\/strong>\n              alert(\"\u6dfb\u52a0\u6570\u636e\u6210\u529f\");<\/strong>\n          }<\/strong>\n     });<\/strong>\n     <\/strong>\n   }<\/strong> <\/pre>\n\n\n\n
\u83b7\u53d6\u540e\u53f0\u6570\u636e<\/strong><\/h3>\n\n\n\n
 import { HttpClient } from \u2018@angular\/common\/http\u2019; \/\/\u5bfc\u5165HttpClient  <\/strong>\n \n constructor(private http: HttpClient) { }  \/\/\u6ce8\u5165HttpClient<\/strong>\n \n   stuList: any;  \/\/\u5b58\u67e5\u8be2\u7ed3\u679c<\/strong>\n   url = \u2018http:\/\/xt-jiaoshiji:8080\/StuManager\/stu\/getStu\u2019; \/\/\u540e\u53f0\u5730\u5740<\/strong>\n \n   getData(){   <\/strong>\n         this.http.get(url).subscribe(data=>this.stuList=data);    <\/strong>\n   }<\/strong> <\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u9605\u8bfb\u4e4b\u524d\u9700\u8981\u5177\u6709TypeScript\u57fa\u7840\u77e5\u8bc6TypeScript\u57fa\u7840\u603b\u7ed3 \u5982\u679c\u60a8\u7ee7\u7eed\u9605\u8bfb \u6211\u5c06\u9ed8\u8ba4\u4e3a\u60a8\u5df2\u5177\u6709\u76f8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[23,22],"class_list":["post-523","post","type-post","status-publish","format-standard","hentry","tag-angular","tag-projk"],"_links":{"self":[{"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=523"}],"version-history":[{"count":0,"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=\/wp\/v2\/posts\/523\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.tongyunli.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}