angular5项目笔记汇总

很久之前用angular4写过demo,最近用V5来做个小项目,碰到了些问题。在这儿做个笔记。

发布到服务上出现404错误

解决方案1

用锚点实现路由:

// app.module.ts
import { LocationStrategy, HashLocationStrategy} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent,
    ....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    HttpClientJsonpModule,
    NgUploaderModule
  ],
  providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy},
    CookieService,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案2

待补充

上拉更新,下拉翻页控件

移动端刷新组件XtnScroll–Angular4实现
在计算滑动比例哪儿有个bug,自己判断下就是。

附件上传控件

ngx-uploader
缺点:不支持同时长传多个控件和自定义上传。
优点:使用简单

微信内置浏览器记住密码,无法更新model

import { Component, OnInit, ViewEncapsulation } from ‘@angular/core’; 
import { Observable } from ‘rxjs/Observable’;

@Component({ 
  selector: ‘app-component’, 
  templateUrl: ‘./app.component.html’, 
  styleUrls: [‘./app.component.scss’], 
  encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent implements OnInit { 
  input: string;

  constructor() { }

  ngOnInit() { 
    Observable.timer(350).subscribe(() =>{ 
      this.input = (<HTMLInputElement>document.getElementsByName("input")[0]).value || ''; 
      // 或者是 
      this.input = (document.getElementsByName("input")[0] as HTMLInputElement).value || ''; 
    }); 
  } 
}

说明:只是部分浏览器出现这个问题,微信的安卓客户端。
这种解决方式并不好,谁知道其他解决方式烦请告知。

注意:HTMLInputElement 定义在 typescript/lib/lib.dom.d.ts 文件中,其他组件也同样定义在这儿。如:HTMLSelectElement, HTMLMediaElement

#引用无效的问题

html 的组件名称中包含有-,因为 js 中的变量命名不支持-字符。修改即可。

微信的iOS版本jsonp跨越问题

现象:使用jsonp跨越无法设置cookie。

参考资料

【iOS开发】从 UIWebView 到 WKWebView
Form model doesn’t update on autocomplete
angularjs,浏览器的记住密码功能,不能使pwd这个文本框自动 watch?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值