建议和反馈

请填写你的反馈内容

使用ANGULAR和BOOTSTRAP推进单页应用程序

2019-10-03 ·3061次阅读 ·读完需要15分钟

配方概述

使用Angular 2 构建单页应用程序SPA),我们需要学习如何在Angular 2中实现路由。Angular 2带有内置的路由API,这些API非常强大,功能丰富且易于使用。在本食谱中,我们将构建一个基本的搜索引擎模板来演示Angular 2中的路由。我们将不会构建一个完整的搜索引擎,因为这超出了本食谱的范围。我们将使用Bootstrap 4设计搜索引擎模板。在本食谱的最后,您将习惯于使用Angular 2构建SPA。

在学习本教程之前,强烈建议阅读Angular 2体系结构和功能的全面概述

在本食谱中,我们将涵盖以下主题:

  1. 在Angular 2中路由

  2. Angular 2提供的内置HTTP客户端

  3. 使用Chance.js库生成随机文本数据

设置项目

请按照以下步骤设置您的项目:

  1. 在此配方的练习文件中,您将找到两个目录,初始目录和最终目录。最终目录包含最终的搜索引擎模板,而初始目录包含用于快速开始构建搜索引擎模板的文件。

  1. 在初始目录中,您将找到app.js和package.json。在里面

package.json文件,放置以下代码:

“ name”:“ SearchEngine-Template”,“ dependencies”:{ 
“ express”:“ 4.13.3”,
“ chance”:“ 1.0.3” 


在这里,我们列出Express.js和Chance.js作为依赖项。Express将用于构建Web服务器,而Chance.js将用于生成随机文本数据以填充模板的搜索结果。

  1. 现在,在初始目录中运行npm install以下载软件包。

在初始目录中,您将找到一个名为public的目录,所有静态资产都将放置在该目录中。在公共目录中,您会找到componentTemplates,css,html和js目录。
在css目录中,您会找到bootstrap.min.css;。html目录中的index.html;最后是js目录中的index.js,angular2-all.umd.js,angular2-polyfills.js和Rx.umd.js。

  1. 在index.html中,放置以下起始代码以加载Angular,Bootstrap和

index.js文件:
<!doctype html> 
 
 
搜索引擎模板</ title> </span><br/><span style=""><link rel =“ stylesheet” type =“ text / css” href =“ / css / bootstrap.min。 css“> </span><br/><span style=""></ head> </span><br/><span style=""><body></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><script src =“ / js / angular2-polyfills.js”> </ script> </span><br/><span style=""><script src =“ / js / Rx.umd.js”> </ script> </span><br/><span style=""><script src =“ / js / angular2-all。 umd.js“> </ script> </span><br/><span style=""><script src =” / js / index.js“> </ script> </span><br/><span style=""></ body> </span><br/><span style=""></ html> </span><br/><span style="">此代码是不言自明的。</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,在app.js文件中,放置以下代码:</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">var express = require(“ express”); </span><span style="">var app = express(); </span></span><br/><span style="">app.use(express.static(</span><span style="text-decoration:underline;"> </span><span style=""><span style="">目录名+“ / public”)); </span><span style="">app.get(“ / *”,function(httpRequest,httpResponse,next){ </span></span><br/><span style="">httpResponse.sendFile(</span><span style="text-decoration:underline;"> </span><span style="">dirname +“ /public/html/index.html”); </span><br/><span style="">})</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">app.listen(8080); </span><br/><span style="">同样,在这里,大多数代码是不言自明的。</span><br/><span style=""><span style="">无论HTTP请求路径是什么,</span><span style="">我们都只提供</span><span style="">index.html。</span></span><br/></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.2; color: rgb(33, 37, 41); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">配置路由并引导应用程序</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">在SPA中,我们的应用程序的路由在前端中定义。</span><span style="">在Angular 2中,我们需要定义路径和与该路径关联的组件,该组件将为该路径呈现。</span></span><br/><span style="">我们提供到根组件的路由,并且根组件显示绑定到该路由的组件。</span><br/><span style="">让我们为搜索引擎模板创建根组件和路由:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">将此代码放在index.js文件中以创建根组件</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">和路由:</span><br/><span style="">var AppComponent = ng.core.Component({选择器:“ app”,</span><br/><span style="">指令:[ng.router.ROUTER_DIRECTIVES],templateUrl:“ componentTemplates / app.html” </span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:function(){ } </span><br/><span style="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">AppComponent = ng.router.RouteConfig([ </span><br/><span style="">{路径:“ /”,组件:HomeComponent,名称:“ Home”},</span><br/><span style="">{路径:“ / search-result”,组件:SearchResultComponent,名称:“ SearchResult”},</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">{路径:“ / * path”,组件:NotFoundComponent,名称:“ NotFound”} </span><br/><span style="">])(AppComponent);</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">ng.platform.browser.bootstrap(AppComponent,[ng.router.ROUTER_PROVIDERS,ng.core.provide(ng.router.APP_BASE_HREF,{useValue:“ /”})</span><br/><span style="">]));</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,在componentTemplates目录中创建一个名为app.html的文件,并将此代码放入其中:</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><nav class =“ navbar navbar-light bg-faded”> </span><br/><span style=""><ul class =“ nav navbar-nav”> </span><br/><span style=""><li class =“ nav-item”> </span><br/><span style=""><a class =“ nav-link” [routerLink] =“ [ 'Home']“>首页</a> </span><br/><span style=""></ li> </span><br/><span style=""></ ul> </span><br/><span style=""></ nav> </span><br/><span style=""><router-outlet> </ router-outlet> </span><br/><span style="">以下是此代码的工作方式:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">首先,我们创建根组件,称为AppComponent。</span><span style="">创建根组件时,我们向其中添加ng.router.ROUTER_DIRECTIVES指令,这使我们可以使用routerLink指令。</span></span></p></li><li><p><span style=""><span style="">然后,我们使用ng.router.RouteConfig配置应用程序的路由。</span><span style="">我们提供路由数组作为ng.router.RouteConfig方法的参数。</span><span style="">路由由路径,组件和路由名称组成。</span><span style="">路径可以是静态,参数化或通配符,就像Express路径一样。</span><span style="">在此,第一个路由用于主页,第二个路由用于显示搜索结果,最后一个路由用于处理无效的URL,即未定义路由的URL。</span><span style="">ng.router.RouteConfig方法返回一个函数,该函数采用根组件并将路由附加到该组件。</span></span></p></li><li><p><span style=""><span style="">然后,我们初始化应用程序。</span><span style="">在初始化应用程序时,我们将传递ng.router.ROUTER_PROVIDERS提供程序,该提供程序将用于创建与路由相关的各种服务的实例。</span><span style="">此外,我们还提供了一个自定义提供程序,当请求ng.router.APP_BASE_HREF服务的实例时,它会返回/字符。</span><span style="">ng.router.APP_BASE_ HREF用于查找应用程序的基本URL。</span></span></p></li></ol><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">在AppComponent模板中,我们正在显示导航栏。</span><span style="">导航栏上有一个没有href属性的锚标记。</span><span style="">取而代之的是,我们使用routerLink指令分配重定向链接,以便在单击时(而不是重新加载完整的页面),它仅更改URL和组件。</span><span style="">最后,<router-outlet>是根据当前URL显示组件的内容。</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"> </p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.2; color: rgb(33, 37, 41); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">产生随机搜寻结果</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">要填充模板,我们需要生成一些随机搜索结果数据。</span><span style="">为此,我们可以使用Chance.js库。</span><span style="">我们将在服务器端而不是客户</span></span><br/><span style=""><span style="">端端</span><span style="">生成随机数据,以便稍后可以演示如何使用Angular 2 </span><span style="">发出</span><span style="">HTTP请求</span><span style="">。Chance.js可用于客户端JavaScript和服务器端JavaScript。</span><span style="">我们之前下载了Chance.js软件包以与Node.js一起使用。</span><span style="">这是生成随机数据的代码。</span><span style="">将其放在/ *路由上方的app.js文件中,以使/ *不会覆盖随机数据路由:</span></span><br/><span style="">var Chance = require(“ chance”),机会= new Chance(); </span><br/><span style="">app.get(“ / getData”,function(httpRequest,httpResponse,next){var result = []; </span><br/><span style="">for(var i = 0; i <10; i ++)</span><br/><span style="">{</span><br/><span style="">result [result.length] = {标题:机会。句子(),说明:机会。段落()</span><br/><span style="">} </span><br/><span style="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">httpResponse.send(result); </span><br/><span style="">})</span><br/><span style=""><span style="">在这里,我们首先为/ getData路径创建一条路由,该路由发送搜索结果数组作为响应。</span><span style="">路由回调使用机会.sentence()生成搜索结果的随机标题,并使用机会.paragraph()生成描述。</span></span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.2; color: rgb(33, 37, 41); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">创建路线组件</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">让我们创建HomeComponent,SearchResultComponent和NotFoundComponent。</span><span style="">在此之前,让我们创建一个显示搜索表单的组件。</span><span style="">搜索表单将具有一个文本框和一个搜索按钮。</span><span style="">跟着这些步骤:</span></span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">将此代码放在AppComponent代码上方的index.js文件中:</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">var FormComponent = ng.core.Component({选择器:“ search-form”,</span><br/><span style="">指令:[ng.router.ROUTER_DIRECTIVES],templateUrl:“ componentTemplates / search-form.html”,</span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:function( ){},ngOnInit:function(){ </span><br/><span style="">this.searchParams = {查询:“” </span><br/><span style="">};</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">this.keyup = function(e){this.searchParams = { </span><br/><span style="">query:e.srcElement.value </span><br/><span style="">}; </span><br/><span style="">}; </span><br/><span style="">} </span><br/><span style="">}</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,在componentTemplates中创建一个名为search-form.html的文件。</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">目录,并将此代码放在其中:</span><br/><span style=""><div class =“ ma-2 text-xs-center”> </span><br/><span style=""><h1>搜索任何内容</ h1> </span><br/><span style=""><form class =“ form-inline mt-1”> </span><br/><span style=""><input( keyup)=“ keyup($ event)” class =“ form-control” type =“ text” placeholder =“ Search”> </span><br/><span style=""><a [routerLink]="['SearchResult', searchParams]"> </span><br/><span style=""><button class =“ btn btn-success-outline“ type =” submit“>搜索</ button> </span><br/><span style=""></a> </span><br/><span style=""></ form> </span><br/><span style=""></ div></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">代码是这样工作的:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">首先,我们创建一个名为FormComponent的组件。</span><span style="">它使用</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">ng.router.ROUTER_DIRECTIVES指令。</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">在组件的模板中,我们显示一个HTML表单。</span><span style="">表单具有文本框和按钮。</span></span></p></li><li><p><span style="">我们处理文本输入框的keyup事件,并将值存储在</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">searchParams.query属性。</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">该按钮将重定向到SearchResult组件。</span><span style="">请注意,这里我们将searchParams对象传递给routerLink,该对象在重定向时成为查询参数。</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">现在,让我们创建HomeComponent组件。</span><span style="">此组件显示在主页上。</span><span style="">它显示搜索表单。</span></span><br/><span style="">这是创建HomeComponent的方法:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">将此代码放在AppComponent代码上方的index.js文件中:</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">var HomeComponent = ng.core.Component({选择器:“ home”,</span><br/><span style="">指令:[FormComponent],</span><br/><span style="">templateUrl:“ componentTemplates / home.html”,</span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:function(){} </span><br/><span style="">})</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,创建一个名为search-form.html的文件,并将其放在</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">componentTemplates目录:</span><br/><span style=""><search-form> </ search-form> </span><br/><span style="">在这里,HomeComponent代码是不言自明的。</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">现在,让我们创建SearchResultComponent组件。</span><span style="">该组件应在其下方显示搜索表单和搜索结果。</span><span style="">它应该通过向服务器发出HTTP请求来获取结果。</span><span style="">这是SearchResultComponent的代码。</span><span style="">将其放在AppComponent代码上方的index.js文件中:</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">var SearchResultComponent = ng.core.Component({选择器:“搜索结果”,</span><br/><span style="">指令:[FormComponent],viewProviders:[ng.http.HTTP_PROVIDERS],</span><br/><span style="">templateUrl:“ componentTemplates / searchResult.html” </span><br/><span style="">})。Class({</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">构造函数:[ng.router.RouteParams,ng.http.Http,function(params,http){ </span><br/><span style=""><span style="">this.params = params; </span><span style="">this.http = http; </span><span style="">this.response = []; </span></span><br/><span style="">}],</span><br/><span style="">ngOnInit:function(){ </span><br/><span style=""><span style="">var q = this.params.get(“ query”); </span><span style="">this.http.get(“ getData”)。subscribe(function(res){ </span></span><br/><span style="">this.response = JSON.parse(res._body); </span><br/><span style="">} .bind(this)); </span><br/><span style="">} </span><br/><span style="">}</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,创建一个名为searchResult.html的文件并将其放在</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">componentTemplates。</span><span style="">将此代码放在文件中:</span></span><br/><span style=""><style> </span><br/><span style="">ul </span><br/><span style="">{ </span><br/><span style="">list-style-type:none; </span><br/><span style="">} </span><br/><span style=""></ style></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><div class =“ container”> </span><br/><span style=""><search-form> </ search-form> </span><br/><span style=""><div class =“ ma-2 text-xs-center”> </span><br/><span style=""><ul> </span><br/><span style=""><li * ngFor =“#item of response” class = “ mt-2”> </span><br/><span style=""><h4> {{item.title}} </ h4> </span><br/><span style=""><p> {{item.desc}} </ p> </span><br/><span style=""></ li> </span><br/><span style=""></ ul> </span><br/><span style=""></ div> </span><br/><span style=""></ div></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"> </p><p><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">代码是这样工作的:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">在这里,我们提供了ng,http.HTTP_PROVIDERS提供程序,该提供程序在使用Angular 2提供的HTTP客户端服务时使用。使用HTTP客户端服务,我们可以发出HTTP请求。</span></p></li><li><p><span style="">在构造函数属性中,我们将注入HTTP服务以及ng.router.RouteParams服务,该服务用于获取当前URL的查询参数。</span></p></li><li><p><span style="">在ngOnInit方法中,您可以看到如何使用HTTP服务发出GET请求,以及如何使用ng.router.RouteParams服务获得查询参数。</span></p></li><li><p><span style="">在组件的模板中,我们正在使用ngFor指令显示获取的搜索结果。</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"> </p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">现在,让我们创建NotFoundComponent。</span><span style="">这是该代码:</span></span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">将此代码放在AppComponent代码上方的index.js文件中:</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">var NotFoundComponent = ng.core.Component({选择器:“名称搜索”,</span><br/><span style="">templateUrl:“ componentTemplates / notFound.html” </span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:function(){} </span><br/><span style="">})</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,创建一个名为notFound.html的文件并将其放在</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">componentTemplates目录。</span><span style="">将此代码放在文件内:</span></span><br/><span style=""><div class =“ container”> </span><br/><span style=""><div class =“ ma-2 text-xs-center”> </span><br/><span style=""><h1>找不到您要查找的页面</ h1> </span><br/><span style=""></ div> </span><br/><span style=""></ div> </span><br/><span style="">代码是不言自明的。</span></p><p><br/></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.2; color: rgb(33, 37, 41); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">测试模板</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">要测试模板,我们将按照以下步骤操作:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">在初始目录中,运行node app.js命令。</span></p></li><li><p><span style=""><span style="">现在,在浏览器中,打开http:// localhost:8080 / URL。</span><span style="">您应该看到以下输出:</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><img src="https://myhsts.org/img/recipes_tutorials/39/web-design-with-angular2-1.gif" alt="使用Angular学习网页设计" width="524" height="165"/><br/></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style="">现在,在搜索框中键入内容,然后单击“ </span><span style="box-sizing: border-box; font-weight: bolder;">搜索”</span><span style=""><span style="">按钮。</span><span style="">然后,您应该看到以下输出:</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><img src="https://myhsts.org/img/recipes_tutorials/39/web-design-with-angular2-2.gif" alt="使用Angular学习网页设计" width="486" height="344"/><br/></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">现在,在地址栏中输入无效的路径。</span><span style="">您应该能够看到以下输出:</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><img src="https://myhsts.org/img/recipes_tutorials/39/web-design-with-angular2-3.gif" alt="使用Angular学习网页设计" width="530" height="121"/><br/></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.2; color: rgb(33, 37, 41); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">路由生命周期方法</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">当路径与组件匹配时,Angular 2将激活该组件,而当路径更改时,Angular 2将其禁用。</span><span style="">当我们说某个组件已被激活时,这意味着Angular 2已经创建了该组件的一个实例,即该组件的构造函数方法,而当我们说某个组件已被停用时,则意味着该组件已被激活。从DOM中删除并删除实例。</span></span><br/><span style="">在激活或停用组件时调用的组件的方法称为路由生命周期方法。</span><br/><span style="">这是路由生命周期方法的列表:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p><span style=""><span style="">CanActivate:在激活组件之前将调用此挂钩。</span><span style="">它应该返回一个布尔值或一个Promise,指示是否激活该组件。</span></span></p></li><li><p><span style="">routerOnActivate:在激活组件后调用此方法。</span></p></li><li><p><span style=""><span style="">routerCanReuse:当下一个URL更改再次是相同的URL时,调用此方法以查找是否重用组件的上一个实例。</span><span style="">它应该返回一个布尔值或一个Promise,指示是否要重用。</span><span style="">仅在较早创建实例的情况下才调用它。</span></span></p></li><li><p><span style=""><span style="">routerOnReuse:如果正在重用组件,则调用此方法。</span><span style="">在routerCanReuse之后调用。</span></span></p></li><li><p><span style=""><span style="">routerCanDeactivate:在停用组件之前调用此方法。</span><span style="">它应该返回一个布尔值或一个Promise,指示是否要停用该组件。</span></span></p></li><li><p><span style="">routerOnDeactivate:在停用组件后调用此方法。</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">让我们看一下路由生命周期方法的代码示例。</span><span style="">用以下</span></span><br/><span style=""><span style="">代码</span><span style="">替换</span></span><br/><span style=""><span style="">HomeComponent </span><span style="">代码:</span><span style="">var HomeComponent = ng.core.Component({选择器:“ home”,</span></span><br/><span style="">指令:[FormComponent],</span><br/><span style="">templateUrl:“ componentTemplates / home.html”,</span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:function() {},routerOnActivate:function(){ </span><br/><span style="">console.log(“组件已被激活”); </span><br/><span style="">},</span><br/><span style="">routerCanReuse:function(){console.log(“组件可以被重用”);返回true; </span><br/><span style="">},</span><br/><span style="">routerOnReuse:function() ){console.log(“正在重用组件”); </span><br/><span style="">},</span><br/><span style="">routerCanDeactivate:function(){console.log(“可以停用组件”);返回true;</span><br/><br/><span style="">routerOnDeactivate:function(){console.log(“组件已被停用”); </span><br/><span style="">} </span><br/><span style="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">HomeComponent = ng.router.CanActivate(function(){console.log(“可以激活组件”);返回true; </span><br/><span style="">})(HomeComponent); </span><br/><span style=""><span style="">现在,访问主页。</span><span style="">在那里,再次单击主页按钮。</span><span style="">现在,在搜索框中键入内容,然后单击“ </span></span><span style="box-sizing: border-box; font-weight: bolder;">搜索”</span><span style=""><span style="">按钮。</span><span style="">这是您将看到的控制台输出:</span></span><br/><span style="box-sizing: border-box; font-weight: bolder;">可以激活组件可以激活组件可以重复使用组件可以重复使用组件可以禁用组件可以禁用组件</span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.2; color: rgb(33, 37, 41); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">生产模式与开发模式</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"><span style=""><span style="">到目前为止,我们一直在开发模式下运行Angular 2。</span><span style="">开发和生产模式之间的区别在于,在开发模式下,Angular 2在第一次运行后立即启动更改检测,并</span><span style="">在第一次和第二次运行之间发生任何更改</span></span><span style="box-sizing: border-box; font-weight: bolder;">后,在检查</span><span style=""><span style="">错误</span><span style="box-sizing: border-box; font-weight: bolder;"><span style="">后</span></span><span style="">记录一个</span><span style="box-sizing: border-box; font-weight: bolder;"><span style="">值已更改</span></span><span style="">。</span><span style="">这有助于查找错误。</span></span><br/><span style=""><span style="">要启用生产模式,请将此代码放在ng.platform.browser上方。</span><span style="">bootstrap()方法调用:</span></span><br/><span style="">ng.core.enableProdMode();</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(33, 37, 41); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 22.5px; white-space: normal; background-color: rgb(255, 255, 255);"> </p><p><br/></p></div> <div id="goorback"> <li><span>上一篇:</span><a title="使用PYTHON DJANGO上传和处理CSV文件的动手配方" href="https://www.liankexing.com/notetwo/12270">使用PYTHON DJANGO上传和处理CSV文件的动手配方</a></li> <li><span>下一篇:</span><a title="通过高级NODE.JS开发具有单片核心的微服务" href="https://www.liankexing.com/notetwo/12272">通过高级NODE.JS开发具有单片核心的微服务</a></li> </div> <div id="als"> <span id="pingl"><img src="https://www.liankexing.com/Public/Index/img/dh4.png"/>评论(0)</span><span id="huid"><img src="https://www.liankexing.com/Public/Index/img/dh4.png"/>问答(0)</span> </div> <!--提问题--> <div id="tiwenti" style="display:none;position: relative;"> <div id="tishi2"> <div>请先登陆或注册</div> <button type="button" id="ddl">登陆</button><button type="button" id="zzc">注册</button> </div> <!--问题--> </ul> <a name="title1"></a> <!--分页--> <!--回答--> <div id="wz_huifu" style="overflow: hidden;"> <textarea class="wz_input" placeholder="如果您遇到问题,可以悬赏提问,大大提高回答概率和质量"></textarea> <p class="bj_wd">悬赏<input type="text" class="yckb" value="10" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" /><span style="color:#FFCC33;">您共有LK币</span></p> <div class="huid_right"> <button type="button" class="b22">提交问题</button> </div> </div> </div> <!--评论--> <div id="pinglun"> <ul id="ply"> </ul> <!--分页--> <div id="speak" style="margin-top: 30px;height:37px;position: relative;"> <div id="tishi">请先登录或注册<button type="button">登陆/注册</button></div> <input type="text" placeholder="请输入您对笔记的评论" id="plk" /><span class="huserid"><input type="hidden"></span><button type="button" type="button" class="bt1">发表评论</button><button type="button" type="button" class="bt2"><a href="#">取消</a></button> </div> </div> <!--未登录提示--> <div class="wdlti"> <p>请先登陆或注册</p> <div style="margin-top: 40px;"><button type="button">登陆</button><button type="button">注册</button></div> </div> </div> <input type="hidden" class="n_id" value="12271"> <input type="hidden" class="userid" value="309"> <!--推荐阅读--> <div class="center"> <div class="tj_top"> <div>相关推荐</div> </div> <div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47941">从 MyEtherWallet 被攻击事件我们应该学到什么?</a> </h3> <div class="nei_tiltel"> 世界上著名的WEB钱包MyEtherWallet.com 遭遇了历史上首次大规模针对WEB钱包的中间人攻击,攻击时间只有2小时,总共超过价值15万美金的加密数字资产被窃取。我们相信,本次攻击只是一次试...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/315'><img src="/./Public/Uploads/2018-07-25/5b585cde6cb62.jpg" /></a> </div><span class="note_name">VeelDiana</span> · <span>2020-06-04</span> <div class="note_right"><span>1276</span>阅读 · <span>0</span>赞赏 · <span> 0</span>问答</div> </div> </div> </div><div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47833">Reddit的首次代币发行:对以太坊意味着什么?</a> </h3> <div class="nei_tiltel"> 不久前蓝狐笔记谈到Reddit基于以太坊推出其社区代币的计划,而这两天事情已经有了进展。Reddit已经开始准备发行两个子板块社区代币。目前它们正在Beta测试中,这些代币已在以太坊Rinkeby测试...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/246'><img src="/./Public/Uploads/2018-10-29/5bd6aab45a1a0.jpg" /></a> </div><span class="note_name">moondesign</span> · <span>2020-06-02</span> <div class="note_right"><span>1628</span>阅读 · <span>0</span>赞赏 · <span> 0</span>问答</div> </div> </div> </div><div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47832">引介 | 什么是以太坊 2.0 测试网?如何参与?</a> </h3> <div class="nei_tiltel"> 一. 什么是以太坊 2.0 测试网?所谓 “以太坊 2.0 测试网”,指的是在以太坊 2.0 正式启动以前,为测试技术标准(spec)的安全性、各客户端实现的可靠性以及客户端之间的互通性而推出的、可以...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/245'><img src="/./Public/Uploads/2018-11-16/5bee5f9a04c6c.jpg" /></a> </div><span class="note_name">古风</span> · <span>2020-06-02</span> <div class="note_right"><span>2631</span>阅读 · <span>0</span>赞赏 · <span> 0</span>问答</div> </div> </div> </div><div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47828">区块链技术:以太坊2.0技术分享</a> </h3> <div class="nei_tiltel"> 01以太坊的发展之路这是一张2019年的以太坊路线图,我们看到从2013年底,以太坊创始人Vitalik Buterin发布了以太坊初版白皮书,启动了项目,到现在已经不知不觉走过了6个年头。2014年...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/243'><img src="/./Public/Uploads/2018-07-20/5b51503ad3705.jpg" /></a> </div><span class="note_name">三地</span> · <span>2020-06-02</span> <div class="note_right"><span>1640</span>阅读 · <span>0</span>赞赏 · <span> 0</span>问答</div> </div> </div> </div><div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47796">使用 CLion IDE 开发新项目</a> </h3> <div class="nei_tiltel"> 新建项目新建文件夹目录如下:hello|__ src //文件夹|__ include //文件夹|__ Toolchain.cmake //拷贝过来|__ CMakeLists.txt //拷贝过来...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/246'><img src="/./Public/Uploads/2018-10-29/5bd6aab45a1a0.jpg" /></a> </div><span class="note_name">moondesign</span> · <span>2020-06-01</span> <div class="note_right"><span>1170</span>阅读 · <span>0</span>赞赏 · <span> 0</span>问答</div> </div> </div> </div><div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47775">论DeFi协议的分叉</a> </h3> <div class="nei_tiltel"> 随着一批一层区块链将要上线,我一直在思考以太坊的网络效应,以及基于以太坊DeFi协议的护城河(defensibility)。几年前,我写了一篇关于非主权一层网络货币(如比特币和以太坊)网络效应的文章。...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/238'><img src="/./Public/Uploads/2018-07-19/5b506b8b45c5a.jpg" /></a> </div><span class="note_name">波bobo</span> · <span>2020-06-01</span> <div class="note_right"><span>1238</span>阅读 · <span>0</span>赞赏 · <span> 0</span>问答</div> </div> </div> </div> </div> </div> <!--右边--> <div class="all_right"> <div class="xq_1"> <div class="xq_tx"> <a href='/her/309'> <img src="/./Public/Uploads/2018-10-30/5bd80637a9e5d.jpg" /> </a> </div> <p class="xq_name"> <a href='/her/309'>老虎or猫咪</a> </p> <!-- <button type="button" class="guz">关注</button> --> <span class="guanzhu"><button type="button" class="guz">关注</button></span> </div> <div class="xq_2"> <div class="zc1"> <p class="p1">2359</p> <p class="p2">LK币</p> </div> <div class="zc1"> <p class="p1">4</p> <p class="p2">粉丝</p> </div> <div class="zc1" style="border: none;"> <p class="p1">34</p> <p class="p2">笔记</p> </div> </div> <div class="xq_3"> <p class="thank">感谢"老虎or猫咪"</p> <p class="help_p">这篇精彩的笔记,目前已经帮助</p> <ul> <li>0</li> <li>3</li><li>0</li><li>6</li><li>1</li> <span>人</span> </ul> </div> <div class="xq_4"> <span><img src="https://www.liankexing.com/Public/Index/img/fd111.png" style="width:20px;height:20px"/>喜欢0</span> <ul id="txl"> </ul> </div> <!--相关笔记问题视频--> <div id="aboutmore"> <div class="about_top"> <button type="button" class="choose_about">相关课程</button><button type="button">相关问题</button><button type="button">相关笔记</button> </div> <div id="about_content" class="about_content"> <p class="about_video"><a href="/videoseries/97" title="一键成为区块链产品经理">一键成为区块链产品经理</a></p><p class="about_video"><a href="/videoseries/87" title="区块链100问">区块链100问</a></p><p class="about_video"><a href="/videoseries/86" title="CoinBI Talk《关于区块链和比特币》">CoinBI Talk《关于区块链和比特币》</a></p><p class="about_video"><a href="/videoseries/83" title="Conflux Chain Webinar ">Conflux Chain Webinar </a></p><p class="about_video"><a href="/videoseries/76" title="智能合约安全">智能合约安全</a></p><p class="about_video"><a href="/videoseries/73" title="椭圆曲线">椭圆曲线</a></p><p class="about_video"><a href="/videoseries/72" title="区块链模拟器与设计">区块链模拟器与设计</a></p><p class="about_video"><a href="/videoseries/71" title="中心化和去中心化">中心化和去中心化</a></p><p class="about_video"><a href="/videoseries/70" title="裴博士讲解区块链">裴博士讲解区块链</a></p><p class="about_video"><a href="/videoseries/66" title="深入浅出以太坊充值提现-3">深入浅出以太坊充值提现-3</a></p> </div> <div id="about_content1" class="about_content"> <p><a href="/question/20450" title="DAO 无法赎回, 求解!!!">DAO 无法赎回, 求解!!!</a></p><p><a href="/question/20379" title="安装以太坊官方钱包一直停留在这个界面,试了几个版本都是这样">安装以太坊官方钱包一直停留在这个界面,试了几个版本都是这样</a></p><p><a href="/question/20377" title="为什么 Ethereum wallet 转以太币出去不成功?">为什么 Ethereum wallet 转以太币出去不成功?</a></p><p><a href="/question/20163" title="使用provable预言机获取random.org随机数,在部署solidity合同后是否会暴漏random的API-KEY信息?">使用provable预言机获取random.org随机数,在部署solidity合同后是否会暴漏random的API-KEY信息?</a></p><p><a href="/question/20158" title="如何利用网页钱包只发送 ETC 到交易所">如何利用网页钱包只发送 ETC 到交易所</a></p><p><a href="/question/20156" title="以太坊钱包交易失败">以太坊钱包交易失败</a></p><p><a href="/question/20151" title="如何在 Ethereum-Wallet-win64-0-8-9 中添加 显示 RLC 资产">如何在 Ethereum-Wallet-win64-0-8-9 中添加 显示 RLC 资产</a></p><p><a href="/question/20149" title="交易所之间 eth 转账充值一直没有到账,怎么办?">交易所之间 eth 转账充值一直没有到账,怎么办?</a></p><p><a href="/question/20114" title="EOS 加密算法和 ETH 的加密算法有区别吗,还是用的同一套?">EOS 加密算法和 ETH 的加密算法有区别吗,还是用的同一套?</a></p><p><a href="/question/20102" title="​以太坊的整个论坛都找不到一个最新和完整的MIST和parity的使用教程。包含创建代币高级部署等等。没有详尽的介绍。有的话帮忙提供下">​以太坊的整个论坛都找不到一个最新和完整的MIST和parity的使用教程。包含创建代币高级部署等等。没有详尽的介绍。有的话帮忙提供下</a></p> </div> <div id="about_content2" class="about_content"> <p><a href="/notetwo/47941" title="从 MyEtherWallet 被攻击事件我们应该学到什么?">从 MyEtherWallet 被攻击事件我们应该学到什么?</a></p> <p><a href="/notetwo/47833" title="Reddit的首次代币发行:对以太坊意味着什么?">Reddit的首次代币发行:对以太坊意味着什么?</a></p> <p><a href="/notetwo/47832" title="引介 | 什么是以太坊 2.0 测试网?如何参与?">引介 | 什么是以太坊 2.0 测试网?如何参与?</a></p> <p><a href="/notetwo/47828" title="区块链技术:以太坊2.0技术分享">区块链技术:以太坊2.0技术分享</a></p> <p><a href="/notetwo/47796" title="使用 CLion IDE 开发新项目">使用 CLion IDE 开发新项目</a></p> <p><a href="/notetwo/47775" title="论DeFi协议的分叉">论DeFi协议的分叉</a></p> <p><a href="/notetwo/29415" title="以太坊轻客户端测试教程">以太坊轻客户端测试教程</a></p> <p><a href="/notetwo/29382" title="实操 | 教你在以太坊2.0测试网Topaz进行Staking POS挖矿">实操 | 教你在以太坊2.0测试网Topaz进行Staking POS挖矿</a></p> <p><a href="/notetwo/29366" title="BFC首席运营官吕兆发:三个指标看涨以太坊">BFC首席运营官吕兆发:三个指标看涨以太坊</a></p> <p><a href="/notetwo/29310" title="以太坊将再次扮演牛市发动机?这些ETH2.0知识你需要了解">以太坊将再次扮演牛市发动机?这些ETH2.0知识你需要了解</a></p> </div> </div> <div class="right_top"><span>链客社群</span> <a id="kjiaru" href="https://jq.qq.com/?_wv=1027&k=51DeDxc" target="_blank"><img src="/Public/Index/img/jiaru.png">加入</a> </div> <div class="sq" style="height:293px;"> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href=" " target="_blank">一群:725414372</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5LN1tI4" target="_blank">二群:725320858</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5LN1tI4" target="_blank">三群:215418468</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=55Z02r2" target="_blank">五群:783884732</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5T8EcIn" target="_blank">六群:376591368</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5NVnF16" target="_blank">七群:528388604</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5Ek1I4u" target="_blank">八群:822407118</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href=" " target="_blank">九群:822633356</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5kF0ZrU" target="_blank">十群:583842630</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5zpTbdd" target="_blank">十一群:583842630</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5auiKq9" target="_blank">十二群:583842630</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=50EHC2e" target="_blank">十三群:624300375</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5zgxWx9" target="_blank">十五群:814148959</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5LhF5r2" target="_blank">十六群:610211320</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=5bma26H" target="_blank">十七群:928968657</a> </p> <p><img src="https://www.liankexing.com/Public/Index/img/qqs.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a href="https://jq.qq.com/?_wv=1027&k=52Y4aOJ" target="_blank">十八群:928975349</a> </p> <!-- <p><a href="/user/aboutus.html" style="margin: 0;">关于我们></a></p> --> </div> <p id="ww"><img src="https://www.liankexing.com/Public/Index/img/weibo.png" style="width: 22px;margin-right:4px;vertical-align: bottom;" /> <a style="color:#808080" href="https://weibo.com/u/6560656660">微博进入</a> </p> <p id="lx"><img src="https://www.liankexing.com/Public/Index/img/lxwm.png" /> <a style="color:#808080;margin-left: 29px;" href="/user/contact.html">商务合作></a> </p> <p id="hz"><img src="https://www.liankexing.com/Public/Index/img/hezuo.png" /> <a style="color:#808080;margin-left: 29px;" href="javascript:void(0);">广告投放></a> </p> <div style="border-top: 1px solid #d7d7d7;margin-top: 42px;font-size: 13px;color: #808080;"> <p style="margin-top: 36px;">公司名称:北京链客行科技有限公司</p> <p style="margin-top: 12px;">联系方式:010-67707199</p> <p style="margin-top: 12px;">ICP备案号:京ICP备18032136号</p> <p style="margin-top: 12px;">Copyright:链客区块链技术问答社区 版权所有</p> </div> </div> </div> </div> </div> </div> <ul id="xf"> <li id="love_zan" myface=""> <img src="https://www.liankexing.com/Public/Index/img/fd11.png" /> </li> <li id='xuan_sc'><img src="https://www.liankexing.com/Public/Index/img/biji3.png" style="width:28px;position:relative;right:2px" /></li> <!-- <li><img src="https://www.liankexing.com/Public/Index/img/fd2.png" id="weibo" /></li> <li><img src="https://www.liankexing.com/Public/Index/img/fd3.png" id="weixin" /></li> --> </ul> <div class="bj"></div> <div id="huidatx"> <img src="https://www.liankexing.com/Public/Index/img/guli_03.png" /> <p>感谢您的提问,问题被社区永久收入以便新人查看。一定要记得采纳最佳答案哦!加油!</p> <button type="button" id="gb_hd">关闭</button> </div> <div id="huidahf"> <img src="https://www.liankexing.com/Public/Index/img/guli_03.png" /> <p>感谢您的善举,每一次解答会成为新人的灯塔,回答被采纳后获得20算力和相应的LK币奖励</p> <button type="button" id="gb_hd1">关闭</button> </div> <div id="zans_box"> <img src="https://www.liankexing.com/Public/Index/img/zanshang.png" /> <p>您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!</p> <button type="button" id="zs1">取消</button> <button type="button" id="zs2">确定</button> </div> <div id="zans_box2"> <img src="https://www.liankexing.com/Public/Index/img/zanshang.png" /> <p>您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!</p> <button type="button" id="zs11">取消</button> <button type="button" id="zs22">确定</button> </div> <input type="hidden" id="hide" /> <input type="hidden" id="hide2" /> <input type="hidden" id="hide3" /> <input type="hidden" id="hide4" /> <!-- 友盟 --> <div style="display:none"> <script type="text/javascript"> var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1274087249'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1274087249%26show%3Dpic' type='text/javascript'%3E%3C/script%3E")); </script> </div> </body> <script type="text/javascript"> /* var url= window.location.href; var index = url.substring(url.lastIndexOf('/') + 1); var her_id = parseInt(index); $.ajax({ type:"post", data:{n_id:her_id}, url:"https://www.liankexing.com/note/cllm", async:false, success:function (msg){ var note_str=closeHTML(msg.data); $('#contentss').html(note_str); } });*/ function closeHTML(str){ var arrTags=["span","font","b","u","i","h1","h2","h3","h4","h5","h6","p","li","ul","table","div"]; for(var i=0;i<arrTags.length;i++){ var intOpen=0; var intClose=0; var re=new RegExp("\\<"+arrTags[i]+"( [^\\<\\>]+|)\\>","ig"); var arrMatch=str.match(re); if(arrMatch!=null) intOpen=arrMatch.length; re=new RegExp("\\<\\/"+arrTags[i]+"\\>","ig"); arrMatch=str.match(re); if(arrMatch!=null) intClose=arrMatch.length; for(var j=0;j<intOpen-intClose;j++){ str+="</"+arrTags[i]+">"; } // for(var j=(intOpen-intClose-1);j>=0;j--){ // str+="</"+arrTags[i]+">"; // } } return str; } </script> <script src="/Public/Index/js/note_pagetwo.js" type="text/javascript"></script> </html>