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

Question

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

// 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> 

到目前为止，它工作正常，但现在我需要用我试过的值传递的（在上面的例子如“1,2,3”）的svgmap属性值到svgmap.componet.ts的代码中，但我不知道它是否是po ssibile和如何抓住它。

如果可能的话：我可以在我的打字稿子部件中使用什么语法（即：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