{"id":39233,"date":"2023-02-03T15:04:42","date_gmt":"2022-12-04T07:58:20","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/"},"modified":"2024-04-29T12:56:33","modified_gmt":"2024-04-29T04:56:33","slug":"%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/","title":{"rendered":"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\u3011"},"content":{"rendered":"

\u4e3a\u4e86\u5b66\u4e60Angular2\u7684\u8def\u7531\u3002
\n\uff08\u5ffd\u7565\u4e86\u4e0e\u8def\u7531\u5904\u7406\u65e0\u5173\u7684\u90e8\u5206\u5904\u7406\uff0c\u8bf7\u4e8b\u5148\u8c05\u89e3\u3002\uff09<\/p>\n

\u73af\u5883<\/h2>\n

package.json \u6587\u4ef6<\/h3>\n
{<\/span>\r\n  \"name\"<\/span>:<\/span> \"angular\"<\/span>,<\/span>\r\n  \"version\"<\/span>:<\/span> \"1.0.0\"<\/span>,<\/span>\r\n  \"description\"<\/span>:<\/span> \"\"<\/span>,<\/span>\r\n  \"main\"<\/span>:<\/span> \"index.js\"<\/span>,<\/span>\r\n  \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"test\"<\/span>:<\/span> \"echo <\/span>\\\"<\/span>Error: no test specified<\/span>\\\"<\/span> && exit 1\"<\/span>\r\n  },<\/span>\r\n  \"author\"<\/span>:<\/span> \"\"<\/span>,<\/span>\r\n  \"license\"<\/span>:<\/span> \"ISC\"<\/span>,<\/span>\r\n  \"dependencies\"<\/span>:<\/span> {<\/span>\r\n    \"angular2\"<\/span>:<\/span> \"^2.0.0-beta.1\"<\/span>,<\/span>\r\n    \"bootstrap\"<\/span>:<\/span> \"^3.3.6\"<\/span>,<\/span>\r\n    \"es6-promise\"<\/span>:<\/span> \"^3.0.2\"<\/span>,<\/span>\r\n    \"es6-shim\"<\/span>:<\/span> \"^0.33.13\"<\/span>,<\/span>\r\n    \"jquery\"<\/span>:<\/span> \"^2.2.0\"<\/span>,<\/span>\r\n    \"reflect-metadata\"<\/span>:<\/span> \"^0.1.2\"<\/span>,<\/span>\r\n    \"rxjs\"<\/span>:<\/span> \"^5.0.0-beta.0\"<\/span>,<\/span>\r\n    \"systemjs\"<\/span>:<\/span> \"^0.19.17\"<\/span>,<\/span>\r\n    \"zone.js\"<\/span>:<\/span> \"^0.5.10\"<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
tsconfig.json \u7684\u91cd\u65b0\u63cf\u8ff0<\/h3>\n
{<\/span>\r\n    \"compilerOptions\"<\/span>:<\/span> {<\/span>\r\n        \"emitDecoratorMetadata\"<\/span>:<\/span> true<\/span>,<\/span>\r\n        \"experimentalDecorators\"<\/span>:<\/span> true<\/span>,<\/span>\r\n        \"module\"<\/span>:<\/span> \"commonjs\"<\/span>,<\/span>\r\n        \"moduleResolution\"<\/span>:<\/span> \"node\"<\/span>,<\/span>\r\n        \"target\"<\/span>:<\/span> \"es5\"<\/span>,<\/span>\r\n        \"noImplicitAny\"<\/span>:<\/span> true<\/span>,<\/span>\r\n        \"outDir\"<\/span>:<\/span> \"assets\/scripts\"<\/span>,<\/span>\r\n        \"sourceMap\"<\/span>:<\/span> false<\/span>\r\n    },<\/span>\r\n    \"exclude\"<\/span>:<\/span> [<\/span>\r\n        \"node_modules\"<\/span>\r\n    ],<\/span>\r\n    \"files\"<\/span>:<\/span> [<\/span>\r\n      \"typescript\/bootstrap\"<\/span>\r\n    ]<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u76ee\u5f55<\/h2>\n
    \n
  • \n
      \/angular<\/ul>\n<\/li>\n<\/ul>\n
      \/assets<\/p>\n
      \/scripts<\/p>\n
      about.component.js
      \napp.component.js
      \nbootstrap.js
      \ncontact.component.js
      \nhome.component.js
      \nindex.js
      \nnavbar.component.js<\/p>\n
      \/styles<\/p>\n
      navbar.css<\/p>\n
      \/templates<\/p>\n
      my-about.tmpl
      \nmy-contact.tmpl
      \nmy-home.tmpl
      \nmy-navbar.tmpl<\/p>\n
      \/coffee<\/p>\n
      index.coffee<\/p>\n
      \/jade<\/p>\n
      index.jade<\/p>\n
      \/typescript<\/p>\n
      about.component.ts
      \napp.component.ts
      \nbootstrap.ts
      \ncontact.component.ts
      \nhome.component.ts
      \nnavbar.component.ts<\/p>\n
      index.html
      \npackage.json
      \ntsconfig.json<\/p>\n
      \u9996\u9875.html<\/h2>\n
      \u8bf7\u7528\u4e2d\u6587\u7ed9\u4ee5\u4e0b\u5185\u5bb9\u8fdb\u884c\u89e3\u91ca\u6216\u63cf\u8ff0\uff0c\u53ea\u9700\u8981\u63d0\u4f9b\u4e00\u79cd\u9009\u9879\uff1a<\/h3>\n
      \u811a\u672c<\/p>\n
      doctype html\r\nhtml(lang=\"ja\")\r\n  head\r\n    base(href=\"\/angular\/index.html\")\r\n    meta(charaset=\"utf-8\")\r\n    meta(name=\"viewport\" content=\"width=device-width,initial-scale=1\")\r\n    link(rel=\"stylesheet\" href=\"node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\")\r\n    link(rel=\"stylesheet\" href=\"assets\/styles\/navbar.css\")\r\n    title Angular Routing\r\n  body\r\n    my-app Loading ...\r\n    \/\/ for twitter-bootstrap\r\n    script(src=\"node_modules\/jquery\/dist\/jquery.min.js\")\r\n    script(src=\"node_modules\/bootstrap\/dist\/js\/bootstrap.min.js\")\r\n    \/\/ for Angular2\r\n    script(src=\"node_modules\/systemjs\/dist\/system.js\")\r\n    script(src=\"node_modules\/rxjs\/bundles\/Rx.min.js\")\r\n    script(src=\"node_modules\/angular2\/bundles\/angular2-polyfills.min.js\")\r\n    script(src=\"node_modules\/angular2\/bundles\/angular2.min.js\")\r\n    script(src=\"node_modules\/angular2\/bundles\/router.dev.js\")\r\n    script(src=\"assets\/scripts\/index.js\")\r\n<\/code><\/pre>\n
      \u8f6c\u8bd1<\/h3>\n
      $<\/span> jade -P<\/span> jade\/index.jade -o<\/span> .<\/span>\r\n<\/code><\/pre>\n
      index.js -> \u4e3b\u9875.js<\/h2>\n
      \u811a\u672c<\/h3>\n
      appDir<\/span>   =<\/span> \"assets\/scripts\"<\/span>\r\nbootFile<\/span> =<\/span> \"bootstrap\"<\/span>\r\n\r\nSystem<\/span>\r\n  .<\/span>config<\/span>\r\n    packages<\/span> :<\/span>\r\n      \"<\/span>#{<\/span>appDir<\/span>}<\/span>\"<\/span> :<\/span>\r\n        format<\/span>           :<\/span> \"cjs\"<\/span>\r\n        defaultExtension<\/span> :<\/span> \"js\"<\/span>\r\n\r\nSystem<\/span>\r\n  .<\/span>import<\/span> \"<\/span>#{<\/span>appDir<\/span>}<\/span>\/<\/span>#{<\/span>bootFile<\/span>}<\/span>\"<\/span>\r\n<\/code><\/pre>\n
      \u8f6c\u8bd1 y\u00ec)<\/h3>\n
      $<\/span> coffee -o<\/span> assets\/scripts -c<\/span> cafe\r\n<\/code><\/pre>\n
      TypeScript\u6587\u4ef6<\/h2>\n
      \u5f15\u5bfc\u7a0b\u5e8f.js<\/h3>\n
      import<\/span> {<\/span>bootstrap<\/span>}<\/span> from<\/span> \"<\/span>angular2\/platform\/browser<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>AppComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/app.component<\/span>\"<\/span>;<\/span>\r\nbootstrap<\/span>(<\/span>AppComponent<\/span>);<\/span>\r\n<\/code><\/pre>\n
      app.component.ts \u6587\u4ef6<\/h3>\n
      import<\/span> {<\/span>Component<\/span>,<\/span> provide<\/span>}<\/span> from<\/span> \"<\/span>angular2\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>RouteConfig<\/span>,<\/span> ROUTER_DIRECTIVES<\/span>,<\/span> ROUTER_PROVIDERS<\/span>}<\/span> from<\/span> \"<\/span>angular2\/router<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>LocationStrategy<\/span>,<\/span> HashLocationStrategy<\/span>}<\/span> from<\/span> \"<\/span>angular2\/router<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>NavbarComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/navbar.component<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>HomeComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/home.component<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>AboutComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/about.component<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>ContactComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/contact.component<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> TMPL_ROOT<\/span>    =<\/span> \"<\/span>\/angular\/assets\/templates<\/span>\"<\/span>;<\/span>\r\nconst<\/span> COMPONENT_ID<\/span> =<\/span> \"<\/span>my-app<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>   :<\/span> COMPONENT_ID<\/span>,<\/span>\r\n  template<\/span>   :<\/span> `\r\n    <div class=\"container\">\r\n      <my-navbar><\/my-navbar>\r\n      <router-outlet><\/router-outlet>\r\n    <\/div>\r\n  `<\/span>,<\/span>\r\n  directives<\/span> :<\/span> [<\/span>NavbarComponent<\/span>,<\/span> ROUTER_DIRECTIVES<\/span>],<\/span>\r\n  providers<\/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})<\/span>\r\n\r\n@<\/span>RouteConfig<\/span>([<\/span>\r\n  {<\/span>\r\n    path<\/span>         :<\/span> \"<\/span>\/home<\/span>\"<\/span>,<\/span>\r\n    name<\/span>         :<\/span> \"<\/span>Home<\/span>\"<\/span>,<\/span>\r\n    component<\/span>    :<\/span> HomeComponent<\/span>,<\/span>\r\n    useAsDefault<\/span> :<\/span> true<\/span>,<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>         :<\/span> \"<\/span>\/about<\/span>\"<\/span>,<\/span>\r\n    name<\/span>         :<\/span> \"<\/span>About<\/span>\"<\/span>,<\/span>\r\n    component<\/span>    :<\/span> AboutComponent<\/span>,<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>         :<\/span> \"<\/span>\/contact<\/span>\"<\/span>,<\/span>\r\n    name<\/span>         :<\/span> \"<\/span>Contact<\/span>\"<\/span>,<\/span>\r\n    component<\/span>    :<\/span> ContactComponent<\/span>,<\/span>\r\n  },<\/span>\r\n])<\/span>\r\n\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
      \u5bfc\u822a\u680f\u7ec4\u4ef6.js<\/h3>\n
      import<\/span> {<\/span>Component<\/span>,<\/span> OnInit<\/span>}<\/span> from<\/span> \"<\/span>angular2\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>ROUTER_DIRECTIVES<\/span>}<\/span> from<\/span> \"<\/span>angular2\/router<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>HomeComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/home.component<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>AboutComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/about.component<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>ContactComponent<\/span>}<\/span> from<\/span> \"<\/span>.\/contact.component<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> TMPL_ROOT<\/span>    =<\/span> \"<\/span>\/angular\/assets\/templates<\/span>\"<\/span>;<\/span>\r\nconst<\/span> COMPONENT_ID<\/span> =<\/span> \"<\/span>my-navbar<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>    :<\/span> COMPONENT_ID<\/span>,<\/span>\r\n  templateUrl<\/span> :<\/span> TMPL_ROOT<\/span> +<\/span> \"<\/span>\/<\/span>\"<\/span> +<\/span> COMPONENT_ID<\/span> +<\/span> \"<\/span>.tmpl<\/span>\"<\/span>,<\/span>\r\n  directives<\/span>  :<\/span> [<\/span>ROUTER_DIRECTIVES<\/span>],<\/span>\r\n})<\/span>\r\n\r\nexport<\/span> class<\/span> NavbarComponent<\/span> implements<\/span> OnInit<\/span>\r\n{<\/span>\r\n  private<\/span> _selectedId<\/span>:<\/span> string<\/span>;<\/span>\r\n\r\n\r\n  private<\/span> isSelected<\/span>(<\/span>id<\/span>:<\/span> string<\/span>)<\/span>\r\n  {<\/span>\r\n    return<\/span> this<\/span>.<\/span>_selectedId<\/span> ===<\/span> id<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n\r\n  private<\/span> onSelect<\/span>(<\/span>id<\/span>:<\/span> string<\/span>)<\/span>\r\n  {<\/span>\r\n    return<\/span> this<\/span>.<\/span>_selectedId<\/span> =<\/span> id<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n\r\n  public<\/span> ngOnInit<\/span>()<\/span>\r\n  {<\/span>\r\n    this<\/span>.<\/span>_selectedId<\/span> =<\/span> \"<\/span>home<\/span>\"<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
      \u5bb6\u5ead\u7ec4\u4ef6.js<\/h3>\n
      import<\/span> {<\/span>Component<\/span>,<\/span> OnInit<\/span>}<\/span> from<\/span> \"<\/span>angular2\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>Router<\/span>}<\/span> from<\/span> \"<\/span>angular2\/router<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> TMPL_ROOT<\/span>    =<\/span> \"<\/span>\/angular\/assets\/templates<\/span>\"<\/span>;<\/span>\r\nconst<\/span> COMPONENT_ID<\/span> =<\/span> \"<\/span>my-home<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>    :<\/span> COMPONENT_ID<\/span>,<\/span>\r\n  templateUrl<\/span> :<\/span> TMPL_ROOT<\/span> +<\/span> \"<\/span>\/<\/span>\"<\/span> +<\/span> COMPONENT_ID<\/span> +<\/span> \"<\/span>.tmpl<\/span>\"<\/span>,<\/span>\r\n})<\/span>\r\n\r\nexport<\/span> class<\/span> HomeComponent<\/span> implements<\/span> OnInit<\/span>\r\n{<\/span>\r\n  public<\/span> constructor<\/span>(<\/span>private<\/span> _router<\/span>:<\/span> Router<\/span>)<\/span>\r\n  {<\/span>\r\n    \/\/no-op<\/span>\r\n  }<\/span>\r\n\r\n\r\n  public<\/span> ngOnInit<\/span>()<\/span>\r\n  {<\/span>\r\n    this<\/span>.<\/span>_router<\/span>.<\/span>navigate<\/span>([<\/span>\"<\/span>Home<\/span>\"<\/span>]);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
      \u5173\u4e8e\u7ec4\u4ef6.js<\/h3>\n
      import<\/span> {<\/span>Component<\/span>,<\/span> OnInit<\/span>}<\/span> from<\/span> \"<\/span>angular2\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>Router<\/span>}<\/span> from<\/span> \"<\/span>angular2\/router<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> TMPL_ROOT<\/span>    =<\/span> \"<\/span>\/angular\/assets\/templates<\/span>\"<\/span>;<\/span>\r\nconst<\/span> COMPONENT_ID<\/span> =<\/span> \"<\/span>my-about<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>    :<\/span> COMPONENT_ID<\/span>,<\/span>\r\n  templateUrl<\/span> :<\/span> TMPL_ROOT<\/span> +<\/span> \"<\/span>\/<\/span>\"<\/span> +<\/span> COMPONENT_ID<\/span> +<\/span> \"<\/span>.tmpl<\/span>\"<\/span>,<\/span>\r\n})<\/span>\r\n\r\nexport<\/span> class<\/span> AboutComponent<\/span> implements<\/span> OnInit<\/span>\r\n{<\/span>\r\n  public<\/span> constructor<\/span>(<\/span>private<\/span> _router<\/span>:<\/span> Router<\/span>)<\/span>\r\n  {<\/span>\r\n    \/\/no-op<\/span>\r\n  }<\/span>\r\n\r\n\r\n  public<\/span> ngOnInit<\/span>()<\/span>\r\n  {<\/span>\r\n    this<\/span>.<\/span>_router<\/span>.<\/span>navigate<\/span>([<\/span>\"<\/span>About<\/span>\"<\/span>]);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
      \u8054\u7cfb\u7ec4\u4ef6.ts<\/h3>\n
      import<\/span> {<\/span>Component<\/span>,<\/span> OnInit<\/span>}<\/span> from<\/span> \"<\/span>angular2\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>Router<\/span>}<\/span> from<\/span> \"<\/span>angular2\/router<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> TMPL_ROOT<\/span>    =<\/span> \"<\/span>\/angular\/assets\/templates<\/span>\"<\/span>;<\/span>\r\nconst<\/span> COMPONENT_ID<\/span> =<\/span> \"<\/span>my-contact<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>    :<\/span> COMPONENT_ID<\/span>,<\/span>\r\n  templateUrl<\/span> :<\/span> TMPL_ROOT<\/span> +<\/span> \"<\/span>\/<\/span>\"<\/span> +<\/span> COMPONENT_ID<\/span> +<\/span> \"<\/span>.tmpl<\/span>\"<\/span>,<\/span>\r\n})<\/span>\r\n\r\nexport<\/span> class<\/span> ContactComponent<\/span> implements<\/span> OnInit<\/span>\r\n{<\/span>\r\n  public<\/span> constructor<\/span>(<\/span>private<\/span> _router<\/span>:<\/span> Router<\/span>)<\/span>\r\n  {<\/span>\r\n    \/\/no-op<\/span>\r\n  }<\/span>\r\n\r\n\r\n  public<\/span> ngOnInit<\/span>()<\/span>\r\n  {<\/span>\r\n    this<\/span>.<\/span>_router<\/span>.<\/span>navigate<\/span>([<\/span>\"<\/span>Contact<\/span>\"<\/span>]);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
      \u5c06\u4ee3\u7801\u8f6c\u8bd1<\/h3>\n
      $<\/span> tsc\r\n<\/code><\/pre>\n
      \u6a21\u677f\u6587\u4ef6<\/h2>\n
      \u6211\u7684\u5bfc\u822a\u680f\u6a21\u677f<\/h3>\n
      <!-- Static navbar --><\/span>\r\n<nav<\/span> class=<\/span>\"navbar navbar-default\"<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"container-fluid\"<\/span>><\/span>\r\n    <div<\/span> class=<\/span>\"navbar-header\"<\/span>><\/span>\r\n      <button<\/span> type=<\/span>\"button\"<\/span> class=<\/span>\"navbar-toggle collapsed\"<\/span> data-toggle=<\/span>\"collapse\"<\/span> data-target=<\/span>\"#navbar\"<\/span> aria-expanded=<\/span>\"false\"<\/span> aria-controls=<\/span>\"navbar\"<\/span>><\/span>\r\n        <span<\/span> class=<\/span>\"sr-only\"<\/span>><\/span>Toggle navigation<\/span><\/span>\r\n        <span<\/span> class=<\/span>\"icon-bar\"<\/span>><\/span><\/span>\r\n        <span<\/span> class=<\/span>\"icon-bar\"<\/span>><\/span><\/span>\r\n        <span<\/span> class=<\/span>\"icon-bar\"<\/span>><\/span><\/span>\r\n      <\/button><\/span>\r\n      <a<\/span> class=<\/span>\"navbar-brand\"<\/span> href=<\/span>\"index.html\"<\/span>><\/span>Project name<\/a><\/span>\r\n    <\/div><\/span>\r\n    <div<\/span> id=<\/span>\"navbar\"<\/span> class=<\/span>\"navbar-collapse collapse\"<\/span>><\/span>\r\n      <ul<\/span> class=<\/span>\"nav navbar-nav\"<\/span>><\/span>\r\n        <!-- *ngFor \u4f7f\u3063\u3066\u66f8\u304d\u76f4\u3059 --><\/span>\r\n        <li<\/span> [class.active]=<\/span>\"isSelected('home')\"<\/span> (click)=<\/span>\"onSelect('home')\"<\/span>><a<\/span> [routerLink]=<\/span>\"['Home']\"<\/span>><\/span>Home<\/a><\/li><\/span>\r\n        <li<\/span> [class.active]=<\/span>\"isSelected('about')\"<\/span> (click)=<\/span>\"onSelect('about')\"<\/span>><a<\/span> [routerLink]=<\/span>\"['About']\"<\/span>><\/span>About<\/a><\/li><\/span>\r\n        <li<\/span> [class.active]=<\/span>\"isSelected('contact')\"<\/span> (click)=<\/span>\"onSelect('contact')\"<\/span>><a<\/span> [routerLink]=<\/span>\"['Contact']\"<\/span>><\/span>Contact<\/a><\/li><\/span>\r\n        <li<\/span> class=<\/span>\"dropdown\"<\/span>><\/span>\r\n          <a<\/span> href=<\/span>\"#\"<\/span> class=<\/span>\"dropdown-toggle\"<\/span> data-toggle=<\/span>\"dropdown\"<\/span> role=<\/span>\"button\"<\/span> aria-haspopup=<\/span>\"true\"<\/span> aria-expanded=<\/span>\"false\"<\/span>><\/span>Dropdown <span<\/span> class=<\/span>\"caret\"<\/span>><\/span><\/a><\/span>\r\n          <ul<\/span> class=<\/span>\"dropdown-menu\"<\/span>><\/span>\r\n            <li><a<\/span> href=<\/span>\"#\"<\/span>><\/span>Action<\/a><\/li><\/span>\r\n            <li><a<\/span> href=<\/span>\"#\"<\/span>><\/span>Another action<\/a><\/li><\/span>\r\n            <li><a<\/span> href=<\/span>\"#\"<\/span>><\/span>Something else here<\/a><\/li><\/span>\r\n            <li<\/span> role=<\/span>\"separator\"<\/span> class=<\/span>\"divider\"<\/span>><\/li><\/span>\r\n            <li<\/span> class=<\/span>\"dropdown-header\"<\/span>><\/span>Nav header<\/li><\/span>\r\n            <li><a<\/span> href=<\/span>\"#\"<\/span>><\/span>Separated link<\/a><\/li><\/span>\r\n            <li><a<\/span> href=<\/span>\"#\"<\/span>><\/span>One more separated link<\/a><\/li><\/span>\r\n          <\/ul><\/span>\r\n        <\/li><\/span>\r\n      <\/ul><\/span>\r\n      <ul<\/span> class=<\/span>\"nav navbar-nav navbar-right\"<\/span>><\/span>\r\n        <li><a<\/span> href=<\/span>\".\/\"<\/span>><\/span>Default <span<\/span> class=<\/span>\"sr-only\"<\/span>><\/span>(current)<\/span><\/a><\/li><\/span>\r\n        <li><a<\/span> href=<\/span>\"..\/navbar-static-top\/\"<\/span>><\/span>Static top<\/a><\/li><\/span>\r\n        <li><a<\/span> href=<\/span>\"..\/navbar-fixed-top\/\"<\/span>><\/span>Fixed top<\/a><\/li><\/span>\r\n      <\/ul><\/span>\r\n    <\/div><\/span><!--\/.nav-collapse --><\/span>\r\n  <\/div><\/span><!--\/.container-fluid --><\/span>\r\n<\/nav><\/span>\r\n<\/code><\/pre>\n
      \u6211\u7684\u5bb6\u6a21\u677f<\/h3>\n
      <!-- Main component for a primary marketing message or call to action --><\/span>\r\n<div<\/span> class=<\/span>\"jumbotron\"<\/span>><\/span>\r\n  <h1><\/span>Navbar Home<\/h1><\/span>\r\n  <p><\/span>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.<\/p><\/span>\r\n  <p><\/span>\r\n    <a<\/span> class=<\/span>\"btn btn-lg btn-primary\"<\/span> href=<\/span>\"..\/..\/components\/#navbar\"<\/span> role=<\/span>\"button\"<\/span>><\/span>View navbar docs &raquo;<\/span><\/a><\/span>\r\n  <\/p><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
      \u6211-about.tmpl<\/h3>\n
      <!-- Main component for a primary marketing message or call to action --><\/span>\r\n<div<\/span> class=<\/span>\"jumbotron\"<\/span>><\/span>\r\n  <h1><\/span>Navbar About<\/h1><\/span>\r\n  <p><\/span>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.<\/p><\/span>\r\n  <p><\/span>\r\n    <a<\/span> class=<\/span>\"btn btn-lg btn-primary\"<\/span> href=<\/span>\"..\/..\/components\/#navbar\"<\/span> role=<\/span>\"button\"<\/span>><\/span>View navbar docs &raquo;<\/span><\/a><\/span>\r\n  <\/p><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
      \u6211\u7684\u8054\u7cfb\u4eba\u6a21\u677f\u3002<\/h3>\n
      <!-- Main component for a primary marketing message or call to action --><\/span>\r\n<div<\/span> class=<\/span>\"jumbotron\"<\/span>><\/span>\r\n  <h1><\/span>Navbar Contact<\/h1><\/span>\r\n  <p><\/span>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.<\/p><\/span>\r\n  <p><\/span>\r\n    <a<\/span> class=<\/span>\"btn btn-lg btn-primary\"<\/span> href=<\/span>\"..\/..\/components\/#navbar\"<\/span> role=<\/span>\"button\"<\/span>><\/span>View navbar docs &raquo;<\/span><\/a><\/span>\r\n  <\/p><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
      CSS\uff08\u5c42\u53e0\u6837\u5f0f\u8868\uff09<\/h2>\n
      \u5bfc\u822a\u680f\u6837\u5f0f.css<\/h3>\n
      $<\/span> cd <\/span>assets\/styles\r\n$<\/span> wget http:\/\/getbootstrap.com\/examples\/navbar\/navbar.css\r\n<\/code><\/pre>\n
      \u8bbf\u95ee<\/h3>\n
      \u8bf7\u5c06\u4ee5\u4e0b\u5185\u5bb9\u7528\u4e2d\u6587\u7ffb\u8bd1\u5e76\u6539\u5199\uff0c\u53ea\u9700\u8981\u63d0\u4f9b\u4e00\u79cd\u65b9\u5f0f\uff1a
      \nhttp:\/\/hogehoge.com\/angular\/index.html<\/p>\n
      \u732a\u732a\u7db2\u5740\u4e3a\uff1ahttp:\/\/hogehoge.com\/angular\/index.html<\/p>\n
      \u9898\u76ee<\/h2>\n
        1) \u3010\u5b9f\u88c5\u5b8c\u4e86\u3011 [routerLink]\u3092\u5b9a\u7fa9\u3057\u305f\u306e\u3061\u3001\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3042\u3068<\/p>\n
      • \u3092\u6307\u5b9a\u3059\u308b\u306b\u306f\u3069\u3046\u3059\u308b\u304b(click)\u3068[class.active]\u3092\u5229\u7528\u3057\u3066\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002\n
        2) \u3010\u5b9f\u88c5\u5b8c\u4e86\u3011 [routerLink]\u3092\/home\u7b49\u3067\u5b9a\u7fa9\u3059\u308b\u3068\u3001\u30ea\u30ed\u30fc\u30c9\u6642\u306b\u3001404 not found \u306b\u98db\u3070\u3055\u308c\u3066\u3059\u3054\u304f\u30e1\u30f3\u30c9\u30a6\u306a\u611f\u3058\u3002\u3053\u308c\u306f\u30cf\u30c3\u30b7\u30e5\u3092\u4f7f\u3048\u3070\u56de\u907f\u3067\u304d\u305d\u3046\u306a\u306e\u3067\u3001\u305d\u3061\u3089\u306e\u5b9f\u88c5\u306b\u5909\u66f4\u3057\u305f\u3044\u306a\u3041\u3002browser-url-styles<\/p>\n
        angular2\/ts\/src\/router\/hash_location_strategy.ts\u306b\u66f8\u3044\u3066\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n
        3) navbar.component\u4ee5\u5916\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u8a2d\u5b9a\u3057\u305f\u3044\u5834\u5408\u306f\u3069\u3046\u66f8\u304f\u304b\u3002<\/li>\n<\/ul>\n
        \u76f8\u5173<\/h2>\n
        \u5173\u4e8e\u5728[Angular2]\u4e2d\u4f7f\u7528\u7684\u8def\u7531\u5668\u7684HTML\u7684\u57fa\u7840\u5143\u7d20<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u4e3a\u4e86\u5b66\u4e60Angular2\u7684\u8def\u7531\u3002 \uff08\u5ffd\u7565\u4e86\u4e0e\u8def\u7531\u5904\u7406\u65e0\u5173\u7684\u90e8\u5206\u5904\u7406\uff0c\u8bf7\u4e8b\u5148\u8c05\u89e3\u3002\uff09 \u73af\u5883 package.js […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39233","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\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\/\u3010angular2\u3011\u5c1d\u8bd5\u7528angular2\u5b9e\u73b0twitterbootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\u3011\" \/>\n<meta property=\"og:description\" content=\"\u4e3a\u4e86\u5b66\u4e60Angular2\u7684\u8def\u7531\u3002 \uff08\u5ffd\u7565\u4e86\u4e0e\u8def\u7531\u5904\u7406\u65e0\u5173\u7684\u90e8\u5206\u5904\u7406\uff0c\u8bf7\u4e8b\u5148\u8c05\u89e3\u3002\uff09 \u73af\u5883 package.js […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010angular2\u3011\u5c1d\u8bd5\u7528angular2\u5b9e\u73b0twitterbootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-04T07:58:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T04:56:33+00:00\" \/>\n<meta name=\"author\" content=\"\u9038, \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=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/\",\"name\":\"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\u3011 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2022-12-04T07:58:20+00:00\",\"dateModified\":\"2024-04-29T04:56:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\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\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\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\/\u3010angular2\u3011\u5c1d\u8bd5\u7528angular2\u5b9e\u73b0twitterbootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\u3011","og_description":"\u4e3a\u4e86\u5b66\u4e60Angular2\u7684\u8def\u7531\u3002 \uff08\u5ffd\u7565\u4e86\u4e0e\u8def\u7531\u5904\u7406\u65e0\u5173\u7684\u90e8\u5206\u5904\u7406\uff0c\u8bf7\u4e8b\u5148\u8c05\u89e3\u3002\uff09 \u73af\u5883 package.js […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010angular2\u3011\u5c1d\u8bd5\u7528angular2\u5b9e\u73b0twitterbootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2022-12-04T07:58:20+00:00","article_modified_time":"2024-04-29T04:56:33+00:00","author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/","name":"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\u3011 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2022-12-04T07:58:20+00:00","dateModified":"2024-04-29T04:56:33+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010Angular2\u3011\u5c1d\u8bd5\u7528Angular2\u5b9e\u73b0TwitterBootstrap\u7684\u5bfc\u822a\u680f\u3010\u6b63\u5728\u52aa\u529b\u5b9e\u9a8c\u4e2d\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\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90angular2%e3%80%91%e5%b0%9d%e8%af%95%e7%94%a8angular2%e5%ae%9e%e7%8e%b0twitterbootstrap%e7%9a%84%e5%af%bc%e8%88%aa%e6%a0%8f%e3%80%90%e6%ad%a3%e5%9c%a8%e5%8a%aa%e5%8a%9b%e5%ae%9e%e9%aa%8c\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39233","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39233"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39233\/revisions"}],"predecessor-version":[{"id":85407,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39233\/revisions\/85407"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}