小编Ari*_*ael的帖子

我正在尝试与postMessage实现通信.有一个主页面打开一个带有iframe的弹出窗口,它来自不同的域.到目前为止这工作正常但我想捕获以下错误,当我打开具有错误原点的iFrame时会发生这种错误.

无法在'DOMWindow'上执行'postMessage':提供的目标原点('myOriginURL')与收件人窗口的原点('myWindowsOrigin')不匹配.

origin = 'http://www.myorigin.ch';
if (window.postMessage) {
  try {
     top.postMessage('hello', origin);
  } 
  catch(ex) {
     alert('an error occured');
  }
}

问题是代码永远不会进入catch块.有趣的是,chrome在控制台中显示错误,而所有其他主要浏览器都没有做任何事情(没有警报,没有错误)

如何处理postMessage中的错误？

我用icomoon创建了一个字体

我想使用连字.目前我的所有连字都在连字码中有连字符.例如:my-ligature

所以我用的时候

<i>my-ligature</i>

它在Firefox和IE中可以正常工作,但不是Chrome.当我添加一个  或任何其他角色

<i>my-ligature&nbsp;</i>
<i>my-ligature </li>

它也适用于Chrome.

只要我将连字码中的连字符替换为其他类似下划线的连字符,它就会按照预期在Chrome中运行(不需要空格等)

这是Chrome Bug还是不允许使用连字符？

你会在这里找到一个关于整个事物的演示(用标准的icomoon图标制作) http://www.swisscocktailblog.ch/icomoon/demo.html

编辑:根据要求提供连字的CSS(这是演示中使用的)

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?6mfq3a');
    src:url('fonts/icomoon.eot?#iefix6mfq3a') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6mfq3a') format('truetype'),
    url('fonts/icomoon.woff?6mfq3a') format('woff'),
    url('fonts/icomoon.svg?6mfq3a#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

i, .icomoon-liga {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: …

我尝试创建一个自定义的全局ErrorHandler,并按照此处详述的说明进行操作

应用程序错误处理程序(只是重要部分)

@Injectable()
export class ApplicationErrorHandler extends ErrorHandler {

    constructor(private injector: Injector) {
        super(false);
    }

    handleError(error: any): void {

        if (error instanceof ApplicationError || error.originalError instanceof ApplicationError) {
            this.addError(error.originalError);
        }
        else {
            super.handleError(error);
        }
    }

应用模块

 providers: [
    {
        provide: ErrorHandler,
        useClass: ApplicationErrorHandler
    }
],

app.component(只有重要部分)

public ngOnInit(): void { 
    const error = new ApplicationError();
    error.message = "fehler";
    throw error;
} 

应用程序错误

export class ApplicationError implements Error {
    name: string;
    message: string;
    httpStatus?: number …

我创建了一个自定义控件，我以编程方式为其提供值，因为它是一个基于cropper.js 的图像编辑器，用户通过普通文件输入“上传”图像，然后我使用文件 API 将图像分配给我的自定义控件.

这是代码（为了可读性，我删除了一些cropper.js特定的代码）

import {
   Component,
   OnInit,
   ViewChild,
   ElementRef,
   ViewEncapsulation,
   forwardRef
} from '@angular/core';

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import * as Cropper from 'cropperjs';
import { Photo } from '../entities/photo';

@Component({
   selector: 'image-edit',
   templateUrl: 'image-edit.component.html',
   styleUrls: [
       'image-edit.component.scss',
       '../../../node_modules/cropperjs/dist/cropper.min.css'
],
encapsulation: ViewEncapsulation.None,
providers: [
    {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => ImageEditComponent),
        multi: true
    }
   ]
})

export class ImageEditComponent implements OnInit, ControlValueAccessor {

    get value() {
        return this.cropperImage.nativeElement.src;
    }

    set value(v: string) {
        this.cropperImage.nativeElement.src = …

我的库中有一个主模块，可以调用它forRoot并传递一些配置数据（如此处所示，使用forRoot传递配置数据）

export const MODULE_OPTIONS = new InjectionToken<ModuleOptions>('MODULE_OPTIONS');

@NgModule({
  imports: [
    MySubModule.forRoot(//needs access to options)
  ]
})
export class MyModule {
  static forRoot(options: ModuleOptions = {}): ModuleWithProviders {
    return {
      ngModule: MyModule,
      providers: [
        {
          provide: MODULE_OPTIONS,
          useValue: options
        }
        ]
    }
    }
}

现在，当将主模块“ MyModule”导入应用程序/模块时，我的子模块还需要访问我从外部提供的选项。

如何将提供的ModuleOptions传递MyModule.forRoot给MySubModule？

假设我必须跟随实体

export class Photo {
   public data: Blob;
   public User: string;
}

以下组件

@Component({
   template: '<my-other-component [(ngModel)]="photo.data"></my-other-component>'
})
export class MyComponent {
    @Input()
    photo: Photo;

    constructor(private photoService: PhotoService, private cd: ChangeDetectorRef){}

    public deletePhoto(): void {
       this.photoService.deletePhoto(this.photo)
           .subscribe((result: ApiResult) => {

             //if done here, change detection doesn't work
            this.photo = new Photo();
           });

        //if done here, change detection works
        this.photo = new Photo();
   }
}

PhotoService 是一个发出http 删除请求的服务。

my-other-component实施ControlValueAccessor

my-other-component每当我更改在方法中绑定到子组件的对象时subscribe，都不会传播任何更改。

如果我在我的方法之外调用它，subscribe它就会起作用并my-other-component收到有关更改的通知。

photo …

我在LOCATION_INITIALIZED研究加载ngx-translate的翻译时偶然发现APP_INITIALIZER（请在此处输入链接描述

import { Injector, APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LOCATION_INITIALIZED } from '@angular/common';

export function appInitializerFactory(translate: TranslateService, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      const langToSet = 'en-GB'
      translate.setDefaultLang('en-US');
      translate.use(langToSet).subscribe(() => {
        console.info(`Successfully initialized '${langToSet}' language.'`);
      }, err => {
        console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
    });
  });
}

根据angular的源代码 …