Question

根据http://blog.500tech.com/svg-in-angular-2/制作SVG的内部组件，我们必须使用[attribute]选择器：

// svgmap.componet.ts chunk of code: component declaration
@Component({
    selector: '[svgmap]',
    templateUrl: 'app/svg/map/svgmap.template.html'
  })

在我的场景中，以这种方式在某些父组件模板中使用了SVGMapComponent：

    <svg [attr.class]="mapClass[0]" svgmap="1"></svg>
    <svg [attr.class]="mapClass[1]" svgmap="2"></svg>
    <svg [attr.class]="mapClass[2]" svgmap="3"></svg>

到目前为止它工作正常但现在我需要使用我尝试传递的值作为svgmap属性值（即上例中的“1,2,3”）到svgmap.componet.ts的代码中但是我不知道是否可能以及如何抓住它。

如果可能的话：我可以在我的打字稿子组件中使用什么语法（即：svgmap.componet.ts）？
如果不可能：为什么？它存在一种解决方法吗？

P.S。：我读过一些帖子，比如 https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/在某些情况下启发，但不适用于上述情况。

Answer 1

您可以使用与指令相同的方式：使用与选择器同名的@Input()

@Component({
  selector: '[svgmap]',
  templateUrl: 'app/svg/map/svgmap.template.html'
})

export class SvgMapComponent {
   @Input('svgmap') value:number;
}
ngAfterContentInit() {
   // this.value is now with value set
   console.log(`SVGMapComponent ngAfterContentInit: level=${this.value}`);
   this.svgClass= `map map--${this.value}`; // example usage of the value
}
// arbitrary code here 
} // end of class

如何将数据传递给嵌套（子）Angular 2属性组件

1 个答案: