Question

有条件地，我必须修改SVG元素，所以我创建了多个组件，这些组件具有SVG文件作为templateUrl并执行属性绑定[attr.fill]。

我还需要对SVG文件执行缩放和平移操作。因此，我创建了一个共享组件，其中将发生鼠标事件。

现在，我需要将SVG组件动态传递给父路由组件中的其他组件，在那里我将在SVG上进行鼠标事件。

如果仅使用@input装饰器将img src传递给共享组件，我就能完成所有操作

@Component({
  selector: 'abc-svg',
  templateUrl: './abc-svg.svg',
  styleUrls: ['./abc-svg.component.css']
})

通过上述方法，将创建多个svg组件。

以下是具有所有鼠标事件的共享组件

@Component({
      selector: 'shared-component',
      templateUrl: './shared-component.html',
      styleUrls: ['./shared-component.css']
    })

现在，我需要将abc-svg选择器和其他svg选择器传递给共享组件。

可以使用* ngIf完成此操作，并使用@Input装饰器在共享组件中传递svg名称

<!-- shared-component.component.ts -->
@Input() requiredSvg:string;

<!-- shared-component.component.html -->
<abc-svg *ngIf="requiredSvg === 'abc'"></abc-svg>
<def-svg *ngIf="requiredSvg === 'def'"></def-svg> 

<!-- parent.component.html -->
<shared-component requiredSvg="abc">

我需要不使用* ngIf结构指令的方法。

Answer 1

在声明SvgComponent的模块中声明SharedComponent。然后，您可以在 shared.component.html 模板文件中使用<abc-svg></abc-svg>标签。

编辑：

您可以使用Angular的动态组件加载器以编程方式创建组件。您可以找到一个很好的教程here。声明：

组件模板并非总是固定的。应用程序可能需要在运行时加载新组件。

实现起来并不容易，但是您可以开始

export class ContainerComponent implements OnInit {

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private elementRef: ElementRef) { }

  ngOnInit() {
    const svgComponentFactory = this.componentFactoryResolver.resolveComponentFactory(SvgComponent);
    const componentRef = this.elementRef.createComponent(svgComponentFactory);
  }
}

将具有svg文件作为templateUrl的Angular组件选择器从主路由组件动态传递到其他共享的Angular组件中，而无需* ngIf

1 个答案:

编辑：