建议和反馈

请填写你的反馈内容

深入了解ANGLE 2架构和功能-1

2019-10-04 ·3597次阅读 ·读完需要27分钟

Angular 1基于MVC体系结构,而Angular 2基于组件和服务体系结构。Angular 1和Angular 2在架构和API方面完全不同,因此以前对Angular 1的了解不太可能对您学习Angular 2有很大帮助。在本文中,我们将在不将Angular 2与Angular 1进行比较的情况下学习Angular 2。会造成混乱,这是不必要的。即使您不了解Angular 1,也可以继续阅读本文。

我们将涵盖以下主题:

  1. Web组件

  2. Angular 2架构

  3. 范本语言

  4. 组件输入和输出

  5. 组件生命周期

  6. 大事记

  7. 形式

  8. 服务

  9. 更多…

Angular 2架构

Angular 2是一个基于服务和组件体系结构构建Web应用程序客户端的框架。

Angular 2应用程序由视图和各种服务组成。服务是保存应用程序逻辑和状态的简单JavaScript对象。服务应该是可重用的。视图消耗服务,并且服务也可以彼此交互。
视图和服务是松散耦合的,因此Angular 2视图可与其他任何体系结构(例如Flux)一起使用。同样,服务可以与其他任何视图一起使用,例如React。
Angular 2视图基于面向组件的体系结构。在面向组件的体系结构中,应用程序UI分为可重用的组件。组件的UI带有用于更新UI并处理UI上的用户操作的代码。自定义标签与组件相关联,并且每当自定义标签出现时,都会创建并呈现该组件的新实例。因此,可以说面向组件的体系结构是针对应用程序视图的体系结构。实际上,组件消耗服务。

这是来自Angular 2官方网站(https://angular.io)的图表,显示了Angular 2的完整体系结构:

角度2概述

 

在这里,您可以看到Component的UI 是使用Template定义的模板是使用模板HTML(即HTML和许多其他标记的组合)编写的。组件还保存UI的状态和UI的事件处理程序。
我们不应该在组件内部存储应用程序逻辑和状态,因为它会影响代码的可重用性并在开发大型复杂应用程序时引起问题。应用程序状态和逻辑应存储在服务中。
Angular 2仅实现单向数据绑定。这使得大型复杂的应用程序更易于调试。服务被注入到需要它们的特定组件中,而不是全部
组件中。

Web组件介绍

在学习Web组件之前,您需要知道为什么我们要学习它们。好吧,我们正在学习Web组件,因为Angular 2组件利用了影子DOM和模板,它们是Web组件的一部分。
简而言之,Web组件是四个不同浏览器规范的集合,这些规范使能够在Web页面中创建可重用组件。这四个规范是HTML导入shadow DOM模板自定义元素它们可以一起使用,也可以分开使用。
Web组件提供了面向组件的体系结构的本地实现。使用Web组件创建的组件也称为Web组件。
在学习Web组件之前,让我们考虑一个用于演示目的的项目。创建一个名为web-components的目录,然后在其中创建一个名为index.html的文件。Web组件对浏览器的支持很差,因此让我们下载webcomponents.js polyfill。从https://github.com/webcomponents/webcomponentsjs下载webcomponents.js文件,并将其放置在web-components目录中。
现在,将此代码放在index.html文件中:
<!doctype html> 
 
 
Web组件演示</ title> </span><br/><span style=""><script src =“ webcomponents.js”> </ script> </span><br/><span style=""></ head > </span><br/><span style=""><body> </span><br/><span style=""><script> </span><br/><span style="">//在此处放置JavaScript代码</span><br/><span style=""><</span><br/><br/></p><p><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">现在,通过构建一个组件来显示具有图像,标题和描述的卡片,来概述阴影DOM,模板和自定义元素。</span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="box-sizing: border-box; font-weight: bolder;">模板</span><span style=""><span style="">用于定义可重用的代码。</span><span style="">使用</span></span><br/><span style=""><span style=""><template>标签</span><span style="">定义</span><span style="">模板。</span><span style="">模板的代码位于此标记内。</span><span style="">我们可以放置任何标签,例如<script>和<style>。</span></span><br/><span style=""><template>标记内的代码仅被解析,而不呈现。</span><br/><span style=""><span style="">这是如何创建模板的示例。</span><span style="">将此代码放在body标签中:</span></span><br/><span style=""><template id =“ cardTemplate”> </span><br/><span style=""><style type =“ text / css”> </span><br/><span style="">.container </span><br/><span style="">{ </span><br/><span style=""><span style="">width:250px; </span><span style="">向左飘浮; </span></span><br/><span style="">右边距:10px; </span><br/><span style="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">img </span><br/><span style="">{ </span><br/><span style="">宽度:100%; </span><br/><span style="">} </span><br/><span style=""></ style> </span><br/><span style=""><div class =“ container”> </span><br/><span style=""><img src =“” /> </span><br/><span style=""><div> </span><br/><span style=""><h3> </ h3> </span><br/><span style=""><p> </ p> </span><br/><span style=""></ div> </span><br/><span style=""></ div> </span><br/><span style=""></ template> </span><br/><span style=""><span style="">在这里,模板包含卡组件的UI代码。</span><span style="">现在,如果您在浏览器中打开index.html文件,您将看不到任何内容,因为<template>标签仅被解析而不呈现。</span></span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><br/><span style="">自定义元素</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="box-sizing: border-box; font-weight: bolder;">通过自定义元素,</span><span style="">我们可以定义HTML元素的新类型(即</span><br/><span style=""><span style="">HTML标签的</span><span style="">新类型</span><span style="">)。</span><span style="">当我们使用浏览器无法识别的标签名称时,浏览器只是将其视为<span>标签。</span><span style="">但是,当我们注册一个自定义标签时,它会被浏览器识别。</span><span style="">它可以继承其他元素,让我们在元素生命周期的不同阶段执行不同的操作,等等。</span></span><br/><span style=""><span style="">让我们为组件创建一个自定义元素。</span><span style="">无论标签出现在何处,都会显示该组件的新实例。</span></span><br/><span style=""><span style="">这是显示自定义元素的代码。</span><span style="">将其放在<body>标记中:</span></span><br/><span style=""><custom-card data-img =“ http://placehold.it/250x250” data- title =“标题1” data-description =“描述1”</span><br/><span style=""><custom-card data-img =“ http://placehold.it/250x250” data- title =“标题2” data-description =“描述2”> </ custom-card> </span><br/><span style=""><span style="">我们必须在其中使用-字符自定义元素名称。</span><span style="">这是强制性的,因为此限制允许解析器将自定义元素与常规元素区分开,并确保将新标签添加到HTML时的向前兼容性。</span><span style="">在这里,我们将组件的属性作为数据属性传递。</span></span><br/><span style=""><span style="">现在,让我们将<custom-card>定义为自定义元素,并在创建<custom-card>的新实例时将模板代码放在标签中。</span><span style="">为此,请将此代码放在<script>标记中:</span></span><br/><span style=""><span style="">var customCardProto = Object.create(HTMLElement.prototype); </span><span style="">customCardProto。</span></span><br/><span style=""><span style="">var template = document.querySelector(“#cardTemplate”); </span><span style="">template.content.querySelector(“ img”)。src = this.getAttribute(“ data-img”); </span><span style="">template.content.querySelector(“ h3”)。innerHTML = this.getAttribute(“ data-title”); </span><span style="">template.content.querySelector(“ p”)。innerHTML = this.getAttribute(“ data-description”);</span></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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 clone = document.importNode(template.content,true); </span><span style="">this.appendChild(clone)</span></span><br/><span style="">} </span><br/><span style="">var customCard = document.registerElement(“ custom-card”,{prototype:customCardProto </span><br/><span style="">});</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">默认情况下,自定义元素继承HTMLElement的方法和属性。</span></p></li><li><p><span style=""><span style="">要注册自定义元素,我们需要使用文档。</span><span style="">registerElement方法。</span><span style="">第一个参数是自定义标记名称,第二个参数是可选对象。</span><span style="">这个可选对象可以采用称为</span></span><span style="box-sizing: border-box; font-weight: bolder;">prototype</span><span style=""><span style="">的属性</span><span style="">。</span><span style="">prototype属性定义了它继承的HTML元素,即它继承的HTML元素的属性和方法。</span><span style="">默认情况下,它被分配给Object.create(HTMLElement。prototype)。</span></span></p></li><li><p><span style="">我们还可以通过向分配给原型属性的对象添加新的属性和方法,来向自定义元素添加新的属性和方法。</span></p></li><li><p><span style="">在这里,我们添加了一个名为createdCallback的方法,该方法在创建自定义元素的实例(即使用JavaScript或HTML创建的实例)时被调用。</span></p></li><li><p><span style="">在createdCallback内部,我们将检索模板并设置图像源,标题和说明,然后通过创建其副本将其附加到自定义元素,因为许多自定义元素将共享同一模板。</span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">现在,如果在浏览器中打开index.html,将看到以下输出:</span><br/><img src="https://blockchain.dcwebmakers.com/assets/img/blog/4/web-design-with-js-angular-2.gif" alt="学习角度js" width="424" height="289"/><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">影子DOM</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="box-sizing: border-box; font-weight: bolder;">Shadow DOM</span><span style=""><span style="">允许HTML元素获得一种与之关联的称为影子根的新型节点。</span><span style="">具有与之关联的影子根的元素称为影子主机。</span><span style="">影子主机的内容未渲染;</span><span style="">而是渲染阴影根的内容。</span><span style="">影子根可以在其下具有另一个影子根。</span></span><br/><span style=""><span style="">影子DOM的好处在于,在影子根内部定义的CSS样式不会影响其父文档,而在影子根外部定义的CSS样式不会影响影子根内部的元素。</span><span style="">这对于定义特定于组件的样式很有用。</span><span style="">简而言之,我们可以说影子DOM提供了样式封装。</span></span><br/><span style=""><span style="">样式封装不是影子DOM的唯一好处。</span><span style="">防止阴影根内部的HTML受到JavaScript的意外修改。</span><span style="">我们仍然可以在浏览器开发人员工具中检查影子根。</span></span><br/><span style=""><span style="">许多本机元素(例如<video>和<audio>)都有一个影子根,但是当您检查它时,您将看不到影子根。</span><span style="">默认情况下,浏览器会隐藏这些元素的阴影根。</span><span style="">要查看其影子根,您需要更改特定于浏览器的设置。</span></span><br/><span style=""><span style="">让我们修改前面的自定义元素代码,以在阴影DOM中渲染模板。</span><span style="">将此替换为以前的</span></span><br/><span style=""><span style="">createdCallback </span><span style="">方法:</span><span style="">customCardProto.createdCallback = function(){</span></span><br/><span style=""><span style="">var template = document.querySelector(“#cardTemplate”); </span><span style="">template.content.querySelector(“ img”)。src = this.getAttribute(“ data-img”); </span><span style="">template.content.querySelector(“ h3”)。innerHTML = this.getAttribute(“ data-title”); </span><span style="">template.content.querySelector(“ p”)。innerHTML = this.getAttribute(“ data-description”);</span></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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 clone = document.importNode(template.content,true); </span><span style="">var shadow = this.createShadowRoot(); </span></span><br/><span style="">shadow.appendChild(clone); </span><br/><span style="">} </span><br/><span style="">在这里,而不是直接附加模板代码到自定义元件,我们创建了使用createShadowRoot阴影根和所附模板代码给它。</span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">设置Angular 2项目</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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代码可以用JavaScript,TypeScript或Dart编写。</span><span style="">如果您使用TypeScript或Dart编写Angular 2代码,则需要先将代码转换为JavaScript,然后再提供给客户端。</span><span style="">我们将使用JavaScript编写Angular 2代码。</span></span><br/><span style=""><span style="">创建一个名为angular2-demo的目录。</span><span style="">然后,在目录内创建应用程序。</span><span style="">js和package.json文件。</span><span style="">然后,创建一个名为public的目录,并在该目录内创建另外四个名为html,js,componentTemplates和componentStyles的目录。</span><span style="">现在,创建一个名为index.html的文件并将其放置在html目录中。</span></span><br/><span style=""><span style="">然后,下载angular2-polyfills.js,Rx.umd.js和angular2-all.umd。</span><span style="">来自https://cdnjs.com/libraries/angular.js/的js,并将其放置在angular2-demo / js目录中。</span><span style="">这些文件听起来像。</span><span style="">如果需要,您也可以直接将CDN链接排队。</span></span><br/><span style="">在index.html文件中,放置以下起始代码:</span><br/><span style=""><!doctype html> </span><br/><span style=""><html> </span><br/><span style=""><head> </span><br/><span style=""><title> Angular 2 Demo </ title> </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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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。 umdn.js“> </ script> </span><br/><span style=""><script> </span><br/><span style="">//此处是应用代码</span><br/><span style=""></ script> </span><br/><span style=""></ body> </span><br/><span style=""></ html> </span><br/><span style="">在app.js文件中,放置以下代码:</span><br/><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( “/”,函数(的HttpRequest,HttpResponse对象,下一个){ </span></span><br/><span style="">httpResponse.sendFile(</span><span style="text-decoration:underline;"> </span><span style="">目录名+ “/public/html/index.html”); </span><br/><span style="">})</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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></p><p><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">现在,在package.json文件中,放置以下代码并运行npm install以下载快递包:</span><br/><span style="">{ </span><br/><span style="">“ name”:“ Angular2-Demo”,“ dependencies”:{ </span><br/><span style="">“ express”:“ 4.13.3” </span><br/><span style="">} </span><br/><span style="">} </span><br/><span style=""><span style="">To启动服务器,运行节点app.js。</span><span style="">然后,使用localhost:8080作为浏览器中的地址打开应用程序。</span></span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">Angular 2基础</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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组件是一个可重用的自定义标签,该标签是可变的并封装有嵌入状态,即,对状态或属性的更改将使UI发生变化。</span></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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=""><span style="">这是如何创建组件的示例。</span><span style="">它创建一个显示图像,标题和描述的卡片组件。</span><span style="">将此代码放在<script>标记中:</span></span><br/><span style="">var Card = ng.core.Component({选择器:“ card”,</span><br/><span style="">输入:[“ src”,“ title”,“ desc”],templateUrl:“ templates / card-template .html“,styleUrls:[” templateStyles / card-style.css“] </span><br/><span style="">}). </span><br/><span style="">Class({ </span><br/><span style="">构造函数:function(){ </span><br/><span style="">} </span><br/><span style="">})</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">然后,创建一个名为card-template.html的文件,并将其放置在</span><br/><span style=""><span style="">componentTemplates目录中。</span><span style="">将此代码放在文件中:</span></span><br/><span style=""><style> </span><br/><span style="">.container </span><br/><span style="">{ </span><br/><span style=""><span style="">width:250px; </span><span style="">向左飘浮; </span></span><br/><span style="">右边距:10px; </span><br/><span style="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">img </span><br/><span style="">{ </span><br/><span style="">宽度:100%; </span><br/><span style="">} </span><br/><span style=""></ style> </span><br/><span style=""><div class =“ container”> </span><br/><span style=""><img src =“ {{src}}”“ /> </span><br/><span style=""><div> </span><br/><span style=""><h3> {{title}} </ h3> </span><br/><span style=""><p> {{desc}} < / p> </span><br/><span style=""></ div> </span><br/><span style=""></ div> </span><br/><span style="">之后,创建一个名为card-style.css的文件并将其放置在componentStyles </span><br/><span style=""><span style="">目录中。</span><span style="">将此代码放在文件中:</span></span><br/><span style="">.container </span><br/><span style="">{ </span><br/><span style=""><span style="">width:250px; </span><span style="">向左飘浮; </span></span><br/><span style="">右边距:10px; </span><br/><span style="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">img </span><br/><span style="">{ </span><br/><span style="">宽度:100%; </span><br/><span style="">} </span><br/><span style="">这是这三个代码片段是如何工作的:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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.core对象的Component和Class方法来创建组件。</span></p></li><li><p><span style="">Component方法采用具有各种属性的配置对象,而Class方法采用具有组件生命周期方法,构造函数和UI操作处理程序的对象。</span></p></li><li><p><span style=""><span style="">在这里,我们提供的配置属性是选择器,输入,templateUrl和styleUrls。</span><span style="">selector属性用于定义组件的自定义标签。</span><span style="">输入属性用于定义定制标记采用的属性。</span><span style="">templateUrl属性用于定义包含组件模板的文件。</span><span style="">如果要内联模板代码,也可以使用模板。</span><span style="">最后,styleUrls用于定义包含组件样式的CSS文件。</span><span style="">您也可以使用styles属性内联CSS代码,也可以使用</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">模板本身内的<style>标记。</span><span style="">以这三种方式中的任何一种定义的CSS都不会影响其他组件,也就是说,它封装在组件本身中。</span></span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">在Class方法中,即使不执行任何操作,我们也必须提供构造方法。</span><span style="">在构造组件的新实例期间调用它。</span><span style="">所谓组件的构造,是指在内存中构造组件,而不是解析属性,解析其子级,渲染其视图等等。</span><span style="">构造函数方法的主要用途是将服务注入到组件中。</span><span style="">无法自动注入服务,因为有时我们可能需要为每个组件初始化服务,并且Angular不知道如何执行此操作。</span><span style="">构造方法可以访问组件的状态,但不能访问其属性。</span><span style="">在这里,我们不应该做任何繁重的工作或其他会减慢速度的事情</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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 style="">要呈现处于组件状态的任何内容,我们需要使用{{}}令牌。</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">让我们创建另一个名为Cards的组件,它显示一个卡列表。</span><span style="">它从服务获取有关卡的信息。</span></span><br/><span style="">将此代码放在index.html文件的<script>标记中:</span><br/><span style="">var CardsService = ng.core.Class({构造函数:function(){ </span><br/><span style="">},</span><br/><span style="">getCards:function(){return [{ </span><br/><span style="">src:“ http:// placehold.it/350x150”,标题:“标题1”,</span><br/><span style="">描述:“描述1” </span><br/><span style="">},</span><br/><span style="">{ </span><br/><span style="">src:“ http://placehold.it/350x150”,标题:“标题2”,</span><br/><span style="">描述:“描述2” </span><br/><span style="">},</span><br/><span style="">{</span></p><p><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">});</span></p><p><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">src:“ http://placehold.it/350x150”,标题:“标题3”,</span><br/><span style="">desc:“描述3” </span><br/><span style="">}]</span></p><p><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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 Cards = ng.core.Component({选择器:“ cards”,viewProviders:[CardsService],指令:[Card],</span><br/><span style="">templateUrl:“ componentTemplates / cards-template.html” </span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:[CardsService,函数(cardsService){this.getCards = cardsService.getCards; </span><br/><span style="">}],</span><br/><span style="">ngOnInit:函数(){this.cards = this.getCards(); </span><br/><span style="">} </span><br/><span style="">})</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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 App = ng.core.Component({选择器:“ app”,指令:[Cards],</span><br/><span style="">templateUrl:“ componentTemplates / app-template.html” </span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:function(){</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">}</span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(App); </span><br/><span style="">现在,在componentTemplates </span><br/><span style=""><span style="">目录中</span><span style="">创建一个名为cards-template.html的</span><span style="">文件,并将此代码放在其中:</span></span><br/><span style=""><card * ngFor =“#card of cards” title =“ {{{card.title}}” src =“ {{card .src}}“ desc =” {{card.desc}}“> </ card> </span><br/><span style="">现在,在componentTemplates目录中创建一个名为app-template.html的文件,并将此代码放入其中:</span><br/><span style=""><cards> </ cards> </span><br/><span style="">现在,在index.html文件的<body>标记中,放置以下代码:</span><br/><span style=""><app> </ app> </span><br/><span style="">这是这四个代码段的工作方式:</span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">要创建服务,我们需要使用ng.core.Class方法。</span><span style="">它使用带有构造函数方法和服务公开的其他方法或属性的对象。</span><span style="">将服务注入其他服务或组件时,将创建并注入服务的新实例。</span><span style="">创建服务的新实例时,将调用构造方法。</span><span style="">即使它没有任何作用,我们也必须提供此方法。</span><span style="">此方法的主要目的是注入该服务所依赖的服务。</span><span style="">在这里,我们的CardsService方法不依赖于任何其他服务,因此构造函数方法中没有代码。</span><span style="">然后,我们定义了一个getCards</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">然后,我们创建了一个Cards组件。</span><span style="">它从CardsService获取数据,并为每个卡数据呈现一个Card组件。</span><span style="">在创建Cards组件时,我们为配置对象提供viewProviders和伪指令属性。</span><span style="">viewProviders是组件的服务列表</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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 style="">这是将服务注入组件的格式。</span><span style="">在构造函数方法内部,我们存储对组件所需的服务的方法或属性的引用,也就是说,可以在构造函数方法内部使用服务。</span><span style="">稍后我们将了解有关viewProviders的更多信息。</span></span><br/><span style="">传递给Class方法的任何方法中的this关键字均指向</span><br/><span style=""><span style="">到组件的状态。</span><span style="">创建组件实例后,只要组件状态改变,模板绑定就会更新。</span><span style="">我们这里还有另一个方法,叫做ngOnInit。</span><span style="">这是一个生命周期方法,在创建组件的新实例并解析其属性后会调用该方法。</span><span style="">在其中,我们调用getCards方法并将返回的值存储在状态的cards属性内。</span><span style="">请注意,在创建组件实例之后,可以使用this关键字访问传递到组件标签的属性。</span></span></p><ol style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">在CardsComponent模板的内部,我们使用* ngFor指令显示卡。</span><span style="">稍后我们将学习有关指令的更多信息。</span></span></p></li><li><p><span style=""><span style="">然后,我们创建一个App组件,该组件充当我们组件的根。</span><span style="">在此组件内部,我们将显示“卡片”组件。</span></span></p></li><li><p><span style=""><span style="">最后,我们初始化应用程序。</span><span style="">Angular 2应用程序已显式初始化。</span><span style="">在初始化它时,我们需要提供对根组件的引用。</span><span style="">这样做是为了确保应用程序始终由嵌套组件组成。</span><span style="">根组件是添加到<body>标签的组件。</span><span style="">将其他组件的标签添加到body标签将不会执行任何操作。</span></span></p></li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">现在,如果您在浏览器中刷新localhost:8080页面,您将看到以下输出:</span><br/><img src="https://blockchain.dcwebmakers.com/assets/img/blog/4/web-design-with-js-angular-3.gif" alt="学习角度js" width="462" height="119"/><br/></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">样式化组件和阴影DOM</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">组件的CSS甚至不会影响它拥有的组件。</span></span><br/><span style=""><span style="">默认情况下,Angular 2不使用影子DOM。</span><span style="">相反,它使用另一种技术来实现样式封装。</span><span style="">这是由于缺乏浏览器支持。</span></span><br/><span style=""><span style="">默认情况下,Angular 2修改CSS选择器的方式仅使其定位到组件中的元素,然后将CSS放置在页面的<head>标记中。</span><span style="">如果使用浏览器开发人员工具检查我们当前的应用程序,则会看到以下内容:</span></span><br/><img src="https://blockchain.dcwebmakers.com/assets/img/blog/4/web-design-with-js-angular-4.gif" alt="学习角度js" width="414" height="506"/><br/></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">在这里,您可以看到CSS已被修改并插入到<head>标记中。</span><span style="">为了强制Angular 2使用阴影DOM,我们需要将组件配置对象的encapsulation属性分配给ng.core.ViewEncapsulation。</span><span style="">本机。</span><span style="">默认情况下,它已分配给ng.core.ViewEncapsulation.Emulated。</span></span><br/><span style="">将Card和Cards组件的封装属性分配给ng.core.ViewEncapsulation.Native后,当您检查应用程序时,您将看到类似以下内容:</span><br/><img src="https://blockchain.dcwebmakers.com/assets/img/blog/4/web-design-with-js-angular-5.gif" alt="学习角度js" width="380" height="505"/><br/><br/><span style="">在这里,您可以看到阴影DOM用于实现样式封装。</span></p><h4 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><span style="">Angular 2变化检测</span></h4><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="box-sizing: border-box; font-weight: bolder;">变化检测</span><span style=""><span style="">是检测组件状态变化的过程。</span><span style="">组件的状态使用this关键字进行存储和操作。</span><span style="">因此,Angular 2没有直接的方法来检测状态何时改变。</span><span style="">因此,Angular 2使用复杂的算法和第三方库来检测状态变化。</span></span><br/><span style=""><span style="">Angular 2用于检测状态更改的第一件事是,它假装所有更改都是异步发生的。</span><span style="">然后,它使用zone.js库监视浏览器事件,计时器,AJAX请求,WebSocket和zone.js支持的其他异步内容。</span></span><br/><span style=""><span style="">现在,无论何时发生任何这些异步活动,它都会检查可能更改的所有内容,包括对象属性和根节点中所有组件的this关键字的array元素;</span><span style="">如果检测到任何更改,则将更新组件的模板绑定。</span><span style="">Angular 2不仅可以重新渲染整个组件。</span><span style="">相反,它将检查已更改的绑定,并专门选择和更新它们。</span></span><br/><span style=""><span style="">某些组件可能具有很多状态数据,并且如果每个组件的状态未更改,则检查每个异步操作的状态将不必要地影响应用程序性能。</span><span style="">因此,Angular 2提供了一个标记此类组件的选项,以便除非组件本身告诉Angular 2在下一个检测周期(即下一个异步活动发生时)检查其状态,否则它不会检查其状态。</span><span style="">让我们看一个例子来证明这一点。</span></span><br/><span style=""><span style="">将此代码放在索引的<script>标记中的App组件代码上方。</span><span style="">html文件:</span></span><br/><span style="">var SampleComponent1 = ng.core.Component({选择器:“ sampleone”,</span><br/><span style="">模板:“ {{value}}”,</span><br/><span style="">viewProviders:[ng.core.ChangeDetectorRef],changeDetection:ng.core。</span><br/><span style="">})。Class({ </span><br/><span style="">构造函数:[ng.core.ChangeDetectorRef,function(cd){this.cd = cd; </span><br/><span style="">}],</span><br/><span style="">ngOnInit:function(){this.value = 1; setInterval(function(){ </span><br/><span style="">this.value ++ ; this.cd.markForCheck(); </span><br/><span style="">} .bind(this),2000)</span><br/><span style="">} </span><br/><span style="">})</span><br/><span style=""><span style="">然后,将SampleComponent1添加到App组件的指令数组中。</span><span style="">因此,现在,App组件的代码应为:</span></span><br/><span style="">var App = ng.core.Component({选择器:“ app”,</span><br/><span style="">指令:[Cards,SampleComponent1],</span><br/><span style="">templateUrl:“ componentTemplates / app-template.html” </span><br/><span style="">})。 ({ </span><br/><span style="">构造函数:function(){ </span><br/><span style="">} </span><br/><span style="">})</span><br/><span style="">现在,将此代码添加到app-template.html文件的末尾:</span><br/><span style=""><br style="clear: both"> </span><br/><span style=""><sampleone> </ sampleone> </span><br/><span style="">这三个代码段的工作方式如下:</span></p><ul style="box-sizing: border-box; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">在此示例中,我们显示的值每2秒增加一次,然后重新渲染模板以显示更新的值。</span></p></li><li><p><span style=""><span style="">首先,我们创建一个名为SampleComponent1的组件。</span><span style="">它只是显示价值。</span><span style="">我们已将changeDetection属性设置为ng.core。</span><span style="">ChangeDetectionStrategy.Detached,它告诉Angular 2不要检查其状态更改。</span><span style="">默认情况下,changeDetection属性分配给ng.core.ChangeDetectionStrategy.Default,它告诉Angular 2在每个更改检测周期内检查其状态更改。</span><span style="">然后,我们将ng.core.ChangeDetectorRef服务注入该组件,该服务提供了与更改检测相关的各种API。</span><span style="">然后,在ngOnInit方法中,我们每2秒增加value的值,此后我们调用ng.core.ChangeDetectorRef的markForCheck方法,该方法告诉Angular 2在下一次更改期间检查组件状态的更改-检测周期。</span></span></p></li><li><p><span style="">然后,我们仅在App组件中显示SampleComponent1。</span></p></li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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="">如果组件仅依赖于其输入和/或UI事件,或者想要更改组件的状态,则仅检查其输入是否已更改或事件是否已触发;</span><span style="">然后,您可以将changeDetection分配给ng.core。</span><span style="">ChangeDetectionStrategy.OnPush。</span></span></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: rgb(26, 30, 44); font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", 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: Oswald, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.2; color: rgb(26, 30, 44); font-size: 1.6875rem; white-space: normal; background-color: rgb(255, 255, 255);"><br/></h4><p><br/></p></div> <div id="goorback"> <li><span>上一篇:</span><a title="假期当中重要消息一览,美股下跌黄金大涨4天,BTC跟随联动相对减小。" href="https://www.liankexing.com/notetwo/12280">假期当中重要消息一览,美股下跌黄金大涨4天,BTC跟随联动相对减小。</a></li> <li><span>下一篇:</span><a title="深入了解ANGLE 2架构和功能-2" href="https://www.liankexing.com/notetwo/12282">深入了解ANGLE 2架构和功能-2</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="12281"> <input type="hidden" class="userid" value="316"> <!--推荐阅读--> <div class="center"> <div class="tj_top"> <div>相关推荐</div> </div> <div class="tuijian"> <div class="us_content"> <h3 class="p_titel"> <a href="/notetwo/47966">深圳区块链交易系统开发|交易系统安全和风控解决方案</a> </h3> <div class="nei_tiltel"> 最近,地摊经济成为最热门议题,各大社群媒体纷纷表示:老板,我要辞职去摆地摊了。A股中地摊经济概念股也成为最火热的板块,华斯股份、小商品城、银都股份、海宁皮城、茂业商业等涨停,百大集团、浙江东日、人民同...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/11924'><img src="https://www.liankexing.com/Public/Index/img/touxiangxiao.png" /></a> </div><span class="note_name">区块链开发</span> · <span>2020-06-04</span> <div class="note_right"><span>303</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/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>1375</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/47827">利用网页钱包提取 ETC 教程</a> </h3> <div class="nei_tiltel"> 提取ETC主要有两种方式,本地钱包提取(https://blog.bity.com/2016/08/29/how-to-use-sign-for-the-whitehat-withdrawal/&nb...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/242'><img src="/./Public/Uploads/2018-07-20/5b5149361d286.jpeg" /></a> </div><span class="note_name">naruto</span> · <span>2020-06-02</span> <div class="note_right"><span>978</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/47777">为你的钱包添加多币种支持</a> </h3> <div class="nei_tiltel"> 在 Devcon5 上宣布了多币种支持特性后,我们很快就在 ENS 管理器上实现了这一功能。许多钱包也紧接着开始支持这一特性。开发者们可以通过阅读 EIP 、文档以及我们...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/240'><img src="/./Public/Uploads/2018-07-19/5b502e531a472.jpg" /></a> </div><span class="note_name">区块技术花</span> · <span>2020-06-01</span> <div class="note_right"><span>1588</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/29415">以太坊轻客户端测试教程</a> </h3> <div class="nei_tiltel"> 以太坊轻客户端开始公测(https://github.com/zsfelfoldi/go-ethereum/wiki/Light-Client-Public-Test)。以太坊开发者Alex发推特说,...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/137'><img src="/./Public/Uploads/2018-09-27/5bac354b71520.jpg" /></a> </div><span class="note_name">论坛咸鸟</span> · <span>2020-05-29</span> <div class="note_right"><span>1451</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/29369">区块链挖矿是什么?带你走进比特币挖矿</a> </h3> <div class="nei_tiltel">   前言  比特币和区块链如此火爆,挖矿早已不是一个新鲜的名词了,很多人都知道挖矿,挖矿只不过是一个形象的比喻,那么挖矿到底是干什么呢?今天和大家聊聊什么是挖矿,是时候普及一波知识点了,所以,认真阅读...... </div> <div class="note_xq"> <div class="note_tx"> <a href='/her/5554'><img src="https://www.liankexing.com/Public/Index/img/touxiangxiao.png" /></a> </div><span class="note_name">T185薇29460110</span> · <span>2020-05-28</span> <div class="note_right"><span>354</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/316'> <img src="/./Public/Uploads/2018-07-25/5b585cfaa8baf.jpg" /> </a> </div> <p class="xq_name"> <a href='/her/316'>Moon</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">2696</p> <p class="p2">LK币</p> </div> <div class="zc1"> <p class="p1">16</p> <p class="p2">粉丝</p> </div> <div class="zc1" style="border: none;"> <p class="p1">47</p> <p class="p2">笔记</p> </div> </div> <div class="xq_3"> <p class="thank">感谢"Moon"</p> <p class="help_p">这篇精彩的笔记,目前已经帮助</p> <ul> <li>0</li> <li>3</li><li>5</li><li>9</li><li>7</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/122" title="区块链钱包开发">区块链钱包开发</a></p><p class="about_video"><a href="/videoseries/105" title="如何用Rust打造web服务器">如何用Rust打造web服务器</a></p><p class="about_video"><a href="/videoseries/104" title="如何用Go语言解析足彩数据">如何用Go语言解析足彩数据</a></p><p class="about_video"><a href="/videoseries/80" title="区块链共识算法">区块链共识算法</a></p><p class="about_video"><a href="/videoseries/79" title="区块链原则">区块链原则</a></p><p class="about_video"><a href="/videoseries/78" title="交易的“一生”">交易的“一生”</a></p><p class="about_video"><a href="/videoseries/75" title="交易">交易</a></p><p class="about_video"><a href="/videoseries/74" title="私钥与钱包">私钥与钱包</a></p><p class="about_video"><a href="/videoseries/66" title="深入浅出以太坊充值提现-3">深入浅出以太坊充值提现-3</a></p><p class="about_video"><a href="/videoseries/65" title="深入浅出以太坊充值提现-2">深入浅出以太坊充值提现-2</a></p> </div> <div id="about_content1" class="about_content"> <p><a href="/question/20483" title="如何从第一个生成的地址(m / 44'/ 0'/ 0'/ 0/0)检查比特币钱包余额">如何从第一个生成的地址(m / 44'/ 0'/ 0'/ 0/0)检查比特币钱包余额</a></p><p><a href="/question/20480" title="以太区块同步问题,求大神">以太区块同步问题,求大神</a></p><p><a href="/question/20467" title="发送 eos 代币用 1 Gwei,快一天了,一直 pinding 请问会一直卡在那里吗?">发送 eos 代币用 1 Gwei,快一天了,一直 pinding 请问会一直卡在那里吗?</a></p><p><a href="/question/20414" title="开发企业版钱包时数据库如何进行选择及资金字段如何定义?">开发企业版钱包时数据库如何进行选择及资金字段如何定义?</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/20173" title="关于钱包地址">关于钱包地址</a></p><p><a href="/question/20171" title="core钱包的bitcoind.exe被杀软当木马下载器删了影响使用吗">core钱包的bitcoind.exe被杀软当木马下载器删了影响使用吗</a></p><p><a href="/question/20160" title="MULTIBIT CLASS导出的密钥与原来的地址不同?">MULTIBIT CLASS导出的密钥与原来的地址不同?</a></p><p><a href="/question/20158" title="如何利用网页钱包只发送 ETC 到交易所">如何利用网页钱包只发送 ETC 到交易所</a></p> </div> <div id="about_content2" class="about_content"> <p><a href="/notetwo/47966" title="深圳区块链交易系统开发|交易系统安全和风控解决方案">深圳区块链交易系统开发|交易系统安全和风控解决方案</a></p> <p><a href="/notetwo/47941" title="从 MyEtherWallet 被攻击事件我们应该学到什么?">从 MyEtherWallet 被攻击事件我们应该学到什么?</a></p> <p><a href="/notetwo/47827" title="利用网页钱包提取 ETC 教程">利用网页钱包提取 ETC 教程</a></p> <p><a href="/notetwo/47777" title="为你的钱包添加多币种支持">为你的钱包添加多币种支持</a></p> <p><a href="/notetwo/29415" title="以太坊轻客户端测试教程">以太坊轻客户端测试教程</a></p> <p><a href="/notetwo/29369" title="区块链挖矿是什么?带你走进比特币挖矿">区块链挖矿是什么?带你走进比特币挖矿</a></p> <p><a href="/notetwo/29363" title="优盾钱包3.0——支持全Token 、API一键接入的交易所钱包升级啦!">优盾钱包3.0——支持全Token 、API一键接入的交易所钱包升级啦!</a></p> <p><a href="/notetwo/29224" title="了解下不用助记词的 ZenGo 钱包及门限签名技术">了解下不用助记词的 ZenGo 钱包及门限签名技术</a></p> <p><a href="/notetwo/29222" title="Zcash – 各种密钥和签名,你懂吗?">Zcash – 各种密钥和签名,你懂吗?</a></p> <p><a href="/notetwo/29151" title="MyEtherWallet 钱包幕后工作图示">MyEtherWallet 钱包幕后工作图示</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>