小编use*_*782的帖子

这是我的组件：

import { Component, OnInit, ContentChildren, QueryList } from '@angular/core';
import { IconBoxComponent } from '../icon-box/icon-box.component';

@Component({
  selector: 'app-three-icon-box',
  templateUrl: './three-icon-box.component.html',
  styleUrls: ['./three-icon-box.component.scss']
})
export class ThreeIconBoxComponent implements OnInit {
  @ContentChildren(IconBoxComponent) boxes: QueryList<IconBoxComponent>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    console.log(this.boxes);
  }

}

它的模板如下所示：

<div class="row justify-content-center">
  <div class="col-12 col-md-10">
    <div class="row justify-content-center text-center">
      <div *ngFor="let box of boxes" class="col-12 col-sm-4 col-lg-3 offset-lg-1 lz-mb-2 lz-mb-sm-0">
        {{ box }}
      </div>
    </div>
  </div>
</div>

这就是我渲染它的方式：

  <app-three-icon-box>
    <app-icon-box icon="#icon-one">content 1</app-icon-box>
    <app-icon-box icon="#icon-two">content …

我正在拍摄SVG图像,将其绘制到画布上,然后尝试通过toDataURL将其导出,但Chrome正在向我抛出DOM Exception 18安全错误.我知道问题是因为我用数据URI方案(数据:image/svg + xml; base64)将SVG图像绘制到画布上,所以我猜浏览器将其视为跨域(即安全问题),但我想不出有任何其他方法可以将我的SVG内容放到画布上.我无法托管它,因为在需要通过toDataURL导出之前,SVG内容是动态的并且首先被操纵.

我通读了一些其他类似的问题,但没有找到解决我问题的方法.

我有两个弹性项目; #left应该是640像素宽,#right应该只需填写容器的其余部分,但如果#right中有很长的话,它忽略了#left的flex-basis:640px,基本上把它变成一些奇怪%的宽度.如果我删除了#right内容,一切都按预期工作.

http://jsfiddle.net/f49nL0o7/