互相学习,共同进步,https://github.com/xiaotuni
Angular4 绑定html内容 警告处理
绑定html内容
如果用正常的方法去绑定的话，可能会出再这种警告
&div [innerHTML]="Catcha" &&/div&
---------------------------------------
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
而且页面上也显示不出东西来。
在网上找了一些，说要写指令对其进行转，好麻烦，从官网也找到一个种办法。
bypassSecurityTrustHtml 用这个来进行安装转换。
在返回的结果对内容，或内容字段进行转换，当然要使用
bypassSecurityTrustHtml 的话，还是要依赖注入 DomSanitizer 服务，
import { DomSanitizer } from '@angular/platform-browser';
export class myPage1{
constructor(private sanitizer: DomSanitizer) {
onInit():void{
this.Catcha = this.sanitizer.bypassSecurityTrustHtml('要进行转换的内容');
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！debugger:Angular4学习教程之HTML属性绑定的方法
debugger前言本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。简介基本HTML属性&td [attr.colspan]="tableColspan"&&/td&Css 类绑定&!-- 第一种情况 class 类全部替换 --&&div [class]="divClass"&CSS 类绑定，[class] 全部替换的例子&/div&&!-- 第二种情况 替换 class 类的部分属性 --& &div [class.a]="isSpcial"&CSS 类绑定，[class.sepcial] 部分替换的例子&/div& &!-- 第三种情况 根据表达式显示部分 class 属性--&&div [ngClass]="{a:isA, b:isB}"&CSS 类绑定，[ngClass] 替换多个的例子&/div&Style 属性绑定 &!-- 替换部分的 Style --& &button [style.color]="isSpecial ? 'red' : 'green'" ]&Red&/button&
&!-- 替换所有的样式 --& &button [ngStyle]="{'font-style':this.canSave? 'italic' : 'normal'}" ]&Red&/button&HTML属性绑定&td [attr.colspan]=”tableColspan”&Something&/td&tableColspan 是一个表达式，当界面在渲染的时候会将 tableColspan的值绑定到 attr后面的 colspan 上面去修改 bind.component.html&!-- 增加代码 --&&div& &div&[attr.colspan] 例子：&/div& &table border="1px"& &tr& &td [attr.colspan]="colspanSize"&跨列的例子&/td& &/tr& &tr& &td&单元格1&/td& &td&单元格1&/td& &/tr& &/table&图示：Css 类绑定第一种情况[calss]someExpression 的值会完全替换掉 class的值。修改 bind.component.css.a{background-color: #A7A9AE;}.b{color: #488}.c{font-size: 1}修改bind.component.html&!-- 增加代码 --&&div& &div&CSS 类绑定例子1：[class]&/div& &div [class]="divClass"&CSS 类绑定，[class] 全部替换的例子&/div&&/div&修改 bind.component.tsdivClass:constructor() { //在3秒钟之后将样式设置为 " a b c " setInterval(()=&{ this.divClass = "a b c"; }, 3000)}图示：第二种情况[calss.special]isSpecial 是一个 boolean，当 isSpecial 为 true 的时候会出现 special 的值，为 false的时候不会出现。修改bind.component.html&!-- 增加代码 --&&div [class.a]="isSpcial"&CSS 类绑定，[class.sepcial] 部分替换的例子&/div&修改 bind.component.tsdivClass:isSpcial: boolean =constructor() { setInterval(()=&{ this.divClass = "a b c";
//在 3秒钟之后显示样式 this.isSpcial = }, 3000)}图示：第三种情况[ngClass]="{aaa:isA, bbb: isB}"aaa 是指标签上面class 的属性值，isA 就boolean， 只有当 isA 为 true 的时候才会显示 aaa 属性。 同理，bbb 也是一样。修改bind.component.html&!-- 增加代码 --&&div [ngClass]="{a:isA, b:isB}"&CSS 类绑定，[ngClass] 替换多个的例子&/div&修改 bind.component.tsdivClass:isSpcial: boolean =isA: boolean =isB: boolean =constructor() { setInterval(()=&{ this.divClass = "a b c"; this.isSpcial = this.isA = true this.isB = true }, 3000)}图示：Style 属性绑定第一种情况[style.color] = "isSpecial ? 'red' : 'green' "控制 style样式的 color, 如果 isSpecial 的值为true，那么color的属性为 red。第二种情况[ngStyle]= "{'font-style' : this.canSave ? 'italic' : 'normal' }"控制样式 font-style 如果 this.canSave 的值为 trur 那么样式就是 italic， 否则就是 normal写在最后&&&& 1.对于Style的属性绑定和 class 的属性绑定是一样一样的。&&&& 2.对于文章中所用的代码是结合了 Angular2学习笔记之数据绑定上面的例子做的， 链接地址：总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。angular4开发环境设置教程
一. 设置开发环境
(前提：先安装好node.js和npm)
1.检测版本：node -v和npm -v
2.全局安装：npm install -g @angular/cli
3.创建新项目：ng new my-app(耐心等待)
4.启动服务器：
ng serve &open
ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
使用&open(或-o)参数可以自动打开并访问https://localhost:4200/。
5.编辑第一个angualr
export class AppComponent {
title = &My First Angular App&;
6.浏览器自动刷新变化。成功搭建　　在angular4 项目中，每次请求服务端需要添加头部信息AccessToken作为认证的凭据。但如果在每次调用服务端就要写代码添加一个头部信息，会变得很麻烦。可以使用angular4的HttpClient来拦截每个请求，然后在头部添加上信息。
　　直接上代码实践
　　一、创建拦截器Service，实现HttpInterceptor的intercept方法
import { Injectable, Injector} from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import {AuthenticationService} from './auth/authentication.service'; // 用于获得AccessToken的服务类
import {environment} from '../../environments/environment';
* HTTP拦截器,设置头部信息
@Injectable()
export class BaseHttpInterceptorService implements HttpInterceptor {
authService: AuthenticationS
skipAuth: [string];
constructor(private inject: Injector) {
// 用户登录或认证请求则不需要添加头部AccessToken信息
this.skipAuth = [
`${environment.serverUrl}/api/v1/User/login`,
* 拦截器拦截请求
* @param {HttpRequest&any&} req
* @param {HttpHandler} next
* @returns {Observable&HttpEvent&any&&}
intercept(req: HttpRequest&any&, next: HttpHandler): Observable&HttpEvent&any&& {
this.authService = this.inject.get(AuthenticationService);// 注意此句
const req_started = Date.now();
* 如果是跳过认证的链接，则不添加头部信息
if (this.isSkipAuth(req.url)) {
authReq = req.clone();
const access_token = `Bearer ${this.authService.getAccessToken('')}`;
authReq = req.clone({
setHeaders: {
Authorization: access_token
return next.handle(authReq).do(event =& {
if (event instanceof HttpResponse) {
const elapsed = Date.now() - req_
console.log(`Request for ${req.urlWithParams} took ${elapsed} ms`);
*是否跳过添加头部认证
isSkipAuth(url: string) {
let isMatch = false;
this.skipAuth.forEach((reg_url: string) =& {
if ( !isMatch) {
if (url.search(reg_url) &= <span style="color: #) {
isMatch = true;
return isM
　　二、注册拦截器，在APPModule中，添加如下代码
provide: HTTP_INTERCEPTORS,
useClass: BaseHttpInterceptorService,// 上边定义的拦截器名字
multi: true
　　三、每个请求服务端数据的Service依赖HttpClient，而不是http。
　　那么一个基础的拦截器已经完成了，但是，你会发现调用认证服务Service的时候，会报错：Cyclic dependency error with HttpInterceptor ，如果添加了第一步代码中注意点那段代码后，又会发现OK了。
　　这是依赖注入循环嵌套：A依赖B，B中又引用A。
　　官方文档中采用forwardRef，但是发现没用。在Stack Overflow中看到有人采用上述方法成功解决问题。
如需要更详细的代码或有问题，请联系我
阅读(...) 评论()在 Angular 4 中加载功能模块
过去几年来，Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的，但它在 Angular 2
基础之上添加了对更多语言的支持，比如 Dart 和 Typescript。本教程将介绍如何在 Angular
中开发和加载功能模块。尽管对于较小的应用程序，根模块就足够用了，但对于更大更复杂的应用程序，需要创建功能模块。还需要能够高效地加载模块，以获得最佳应用程序性能。请注意，本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发的开发人员。Angular 中的功能模块单页 Web 应用程序在启动时仅呈现一个 HTML 页面。除了该 HTML 页面之外，服务器还会向客户端发送一个应用程序引擎。该引擎会控制整个应用程序，包括处理和加载 HTML
页面。 一个 Angular 应用程序由以下部分组成：模块组件模板元数据数据绑定指令服务依赖注入每个 Angular 应用程序都至少有一个模块，称为根模块。您可以引导根模块来启动 Angular
应用程序。对于小型应用程序，只需要根模块和一些组件。在构建更复杂的中到大型应用程序时，会向应用程序添加功能模块。功能模块根据业务需求被组织在一个更大的应用程序中。每个模块都包含它所需的特性和功能，而且一些模块被设计为可以重复使用。关于示例应用程序本教程将介绍使用 Angular 4 创建一个中型 Web 应用程序的过程。示例应用程序在 4 个功能区域呈现不断更新的信息：Markets、Sports、Weather 和
Currency。除了为每个区域开发特性模块之外，还可以考虑和实现 3 种应用程序加载技术。加载技术有效的加载策略是开发一个单页应用程序成功的关键。对于示例应用程序，将结合使用 3 种常见的加载技术来实现一种混合加载策略：贪婪加载：在贪婪加载场景中，所有模块和功能都在应用程序启动时加载。对根模块始终采用贪婪加载，在一些情况下，也会对其他功能使用贪婪加载。惰性加载：随着应用程序的功能区域的构建，应用程序的大小会不断增加。在某个时刻，应用程序的大小会达到一个阈值，然后应用程序的加载开始变缓。惰性加载用于减少中大型应用程序的初始加载时间。在示例应用程序中，将使用惰性加载来满足以下应用程序需求：仅在用户请求时加载应用程序区域。加快仅访问某些（优先）区域的用户的加载速度。扩展应用程序功能而不增加初始加载包的大小。预加载：在预加载场景中，主应用程序启动所有标为贪婪加载的模块，然后几乎立即在后台加载
&ModulesDefinedAsLazyLoading&。当用户导航到这些辅助模块中的某个模块时，就会加载该模块并准备就绪。出于本教程的目的，假设应用程序用户最感兴趣的是获取有关金融市场和体育项目的更新。您首先要加载这些模块，随后加载货币和天气模块。前提条件要掌握本教程，需要在开发机器上安装两个工具：输入命令 ng -v，以便找到您当前使用的 Angular CLI 和 Node 的版本。如下所示，我使用的是 Node 7.9.0 和 Angular
CLI 1.0.2。@angular/cli: 1.0.2
node: 7.9.0
os: win32 x64练习 1：贪婪加载示例应用程序目前有两个模块：AppModule 和 BaseModule。AppModule
是根模块，BaseModule 是功能模块。BaseModule 包含两个功能区域：Markets 和
Sports。我们指定对这些应用程序执行贪婪加载，所以 AppModule 会在应用程序启动时调用 BaseModule。让我们来分析一下该应用程序：如果尚未下载源代码，请下载它。 将 Angular4BaseModules 源文件（位于 Angular4TutorialSrc.zip 中）解压到一个空目录位置。我的目录名为
…/fm。转到 …/fm 目录并输入命令 npm i。这会在 …/fm 文件夹中创建
node_modules 目录，即 …/fm/node_modules。运行命令 ng serve。您会看到应用程序在默认端口 4200 中成功运行，以及一条与此消息类似的消息：图 1. 应用程序运行在端口 4200ng 是一条 Angular CLI 命令，您将使用它构建和处理应用程序代码。打开 Chrome 浏览器并输入 URL
http://localhost:4200。您会看到该应用程序正在运行。如果单击 Home 图标，将会看到 Markets 的功能区域： 图 2. Markets 的用户界面如果单击 Sports，将会看到 Sports 的功能区域： 图 3. Sports 的用户界面现在转到 fm/src/app 目录中的应用程序代码。这是该目录的快照。图 4. 应用程序目录结构在您的应用程序目录中，打开文件 app.component.html。用户单击 Markets 链接时，应用程序会调用
/markets 路径。用户单击 Sports 链接时，应用程序会调用 /sports 路径。图 5. 主应用程序中的路径打开文件 app-routing.module.ts，如下所示。图 6. app-routing.module.ts在调用 /markets 和 /sports 路径时，会调用 MarketComponent 和
SportsComponent。如果未指定路径，数组中的第一项会重定向到 /markets 路径。要确认目前实现的应用程序功能，可在浏览器中返回到 http://localhost:4200。在 Windows 机器上，按下
Fn+F12。在 Mac 机器上，按下 Command-&Option-&i。现在您会看到
Chrome 开发人员工具 GUI。查看 Sources/top/ng:// 部分，然后重新加载 URL。如图 7 所示，您会看到在重启应用程序时自动加载了
AppModule 和 BaseModule。 图 7. 在 Google Chrome 开发人员工具中查看源代码练习 2：惰性加载假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。从应用程序源代码中解压 Angular4LazyLoadModules 文件（位于 Angular4TutorialSrc.zip 中）。将 weather
和 currency 文件夹复制到您的主应用程序目录中，如下所示。图 8. 将辅助模块添加到主应用程序目录您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。要将新模块添加到基础应用程序中，可以编辑
app-routing.module.ts，如下所示：清单 1. 原始 app-routing.module.ts
的一节const appRoutes: Routes = [
{ path: '', redirectTo: '/markets', pathMatch: 'full' },
{ path: 'markets', component: MarketsComponent },
{ path: 'sports', component: SportsComponent }
];清单 2. 更新后的 app-routing.module.ts
的一节const appRoutes: Routes = [
{ path: '', redirectTo: '/markets', pathMatch: 'full' },
{ path: 'markets', component: MarketsComponent },
{ path: 'sports', component: SportsComponent },
{ path: 'weather', loadChildren: './weather/weather.module#WeatherModule' },
{ path: 'currency', loadChildren: './currency/currency.module#CurrencyModule' }
];更新后的代码告诉 Angular，在用户请求时加载辅助模块。请注意，weather 模块的 loadChildren 属性被设置为
WeatherModule 的地址。该地址是 WeatherModule 的文件位置（相对于应用程序根目录），后跟 #
separator，再后面是已导出的模块类的名称 WeatherModule。Currency 模块的配置完全相同。当路由器导航到更新后的地址时，它会使用 loadChildren 字符串动态加载 WeatherModule 或
CurrencyModule。第一次请求某个新路径时，会惰性加载该模块并重新配置应用程序路径。然后该路径立即可供后续请求使用。更新 UI接下来，将会更新用户界面。在您的应用程序目录中找到文件 app.component.html，将光标放在以下语句下方：清单 3. 原始 app.component.html
&li routerLinkActive="active"& &a routerLink="/sports"&Sports&/a&&/li&在该语句下插入以下代码：清单 4. 更新后的 app.component.html
&li class="dropdown"& &a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"&Weather &span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li routerLinkActive="active"&&a [routerLink]="['/weather/yahoo']"&Yahoo! Weather&/a&&/li&
&li routerLinkActive="active"&&a [routerLink]="['/weather/facts']"&Weather Facts&/a&&/li&
&li routerLinkActive="active"&&a [routerLink]="['/weather/globalwarming']"&Global Warming&/a&&/li&
&li routerLinkActive="active"& &a routerLink="/currency"&Currency&/a&&/li&现在用户将会看到并能单击 Weather 和 Sports 应用程序区域的新菜单。请注意，Weather 有 3 个子菜单。保存文件内容，然后发出命令 ng serve 来运行该应用程序。图 9. 该应用程序正在运行现在检查执行 ng serve 命令后的应用程序输出。您会看到两个针对 “chunk” 文件的新行，它们是被
angular-cli 自动添加的。这些行表示您惰性加载的模块。浏览器中的应用程序现在应包含 Weather 和 Currency 菜单，如图 10 所示。图 10. 右上角的 Weather 和 Currency 菜单幕后过程在继续操作之前，我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。在 Windows 机器上，按下 Fn+F12。在 Mac
上，按下 Command-&alt-&i。单击 Network 选项卡并等待页面加载。单击 Weather 或 Currency
链接前，查看下面的图 11 （第 1 列）和图 12（第 1 列）。图 11. 测试和调试期间可用的源代码图 12. 网络相关信息这些图显示了贪婪加载的模块 AppModule 和 BaseModule。可以看到 Weather 和 Currency 模块尚未加载。现在尝试单击 Currency 菜单，查看图 11（第 2 列）和图 12（第 2 列）中的 Sources 和 Network 选项卡。您会看到
Currency 模块 (module(y.chunk.js)) 已加载。但是，Weather 模块尚未加载。单击
Weather，然后单击 Weather 子菜单下的一个菜单项。参见图 11（第 3 列）和图 12（第 3 列），您现在应看到 Weather
模块 (module(x.chunk.js)) 也已加载。请注意，x 和 y 块分别有一个整数值；惰性加载机制通过它们获知要加载这些模块。 练习 3：预加载除了等待用户调用辅助模块的路径，有时预先加载这些模块更高效。在这种情况下，在贪婪加载主要模块后，路由器开始预加载标有 loadChildren
属性的所有剩余模块。要为预加载重新配置应用程序，可编辑您的 app-routing.module.ts，如下所示。下面的代码导入了预加载模块并调用它们的功能。清单 5. 原始 app-routing.module.ts
的一节import { Routes, RouterModule } from '@angular/router';清单 6. 更新后的 app-routing.module.ts
的一节import { Routes, RouterModule, PreloadAllModules } from '@angular/router';清单 7. 原始 app-routing.module.ts
的一节imports:[RouterModule.forRoot(appRoutes)],清单 8. 更新后的 app-routing.module.ts
的一节imports:[RouterModule.forRoot(appRoutes, {preloadingStrategy:PreloadAllModules})],保存更新后的文件，然后运行该应用程序。在 Chrome 浏览器中重新加载该应用程序，然后转到 Chrome 开发人员工具的 Network 和 Sources
选项卡。x.chunk.js 和 y.chunk.js
文件应紧接着主应用程序后被加载，使辅助模块在用户单击这些菜单之前就已可用。参见 Angular4PreLoadModules.zip
中的示例应用程序，更详细地了解预加载。结束语加载时间是应用程序性能的关键因素，它会影响应用程序的用户体验。本教程介绍了一种混合加载策略，使用贪婪加载、惰性加载和预加载 3
种技术来提高应用程序性能。要实现有效的混合加载策略，可遵循以下经验法则：对基础应用程序功能和主要模块使用贪婪加载。这些是必须在应用程序启动时就能用的资源。对大多数用户将要访问的模块使用预加载，即使它们不是第一个查找的或查找得最频繁的应用程序资源。对需求不太高的模块使用惰性加载。致谢感谢 IBM 成员 John Petri、David Stanich、Mark Shade、Dean P. Cummings 和 Don Turner
在编写本教程期间提供的审查和支持。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=http://www.ibm.com/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=1047781ArticleTitle=在 Angular 4 中加载功能模块publish-date=