Angular V4.0 几个应用场景

1. Http 跨域

使用http 无法跨域访问,报错:“No 'Access-Control-Allow-Origin' header is present on the requested resource”

解决方法可以在服务器端加必须在response中添加 Access-Control-Allow-Origin 的header;

或者使用 jsonp,或者在服务器端做反向代理。

2. 后台更新数组,ngFor 没有更新 view

使用 ngZone 来更新数组,参考:https://stackoverflow.com/questions/31706948/angular2-view-not-changing-after-data-is-updated

import {NgZone} from 'angular2/angular2';
import {SocketService} from 'js/services/SocketService';

export class MyService {
    zone:NgZone;
    myList:Array<string> = [];
    socketSvc:SocketService;

    constructor() {
        this.zone = new NgZone({enableLongStackTrace: false});
        this.socketSvc = new SocketService();
        this.initListeners();
    }

    getData() {
        this.socketSvc.emit('event');
    }

    initListeners() {
        this.socketSvc.socket.on('success',(data) => {
            this.zone.run(() => {
                this.myList = data;
                console.log('Updated List: ',this.myList);
            });
        });
    }
 }

3. 获取当前页面的 url 地址

使用 @angular/common/Location 的 path() 只能取得除主机外的路径,不包含域名及端口号。

可以直接在代码调用 window.location,angular 的 typescript 文件中,可以直接访问 window 对象的方法属性,无须 import 或注入。

如 alert,location,document 等


4. url query string encoding

如上,直接使用 window 的方法encodeURIComponent

 console.log(encodeURIComponent(location.href));

5. unsafe:url

当使用跨站 URI 资源时,如图片链接等,使用数据绑定,会自动加上 unsafe:

可以使用import { DomSanitizer } from "@angular/platform-browser" 声明可信任网址。

参考:https://angular.cn/docs/ts/latest/guide/security.html#!#bypass-security-apis


6. 调用第三方 js 库

a) 在 index.html 中包含 <script src=...

b) 定义 xxx.d.ts

c) 在 ts 文件头加入 /// <reference path="../dt/xxx.d.ts"/>

比如要定义一个函数,可以在 xx.d.ts 中写:

declare function jsSHA(a:any,b:any):void;

参考:http://www.gyzhao.me/2016/04/30/VsCodeTypings/

http://www.typescriptlang.org/docs/handbook/namespaces.html

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...