Question

我是这个组成部分：

<element skillType="tec"></element>

我需要在我的控制器中获取skillType参数，我这样做：

@Component({
    selector: 'element',
    template: `
    {{skillType}}
  `
})
    export class element {

        @Input() skillType: string;
        console.log(skillType);
    }

在模板中我得到文本tec，但在日志中我得到undefined，我也尝试过使用ngOnInit，但仍然得到相同的结果。

有什么想法吗？

提前感谢！

Answer 1

我认为这与将组件导入您实际使用它的组件以及如何使用this引用类变量有关。

例如 - 要在上传组件中使用元素组件，您需要将其导入，然后将其添加到指令数组中，如下所示：

import { ElementComponent } from '../shared/test.component.ts';

@Component({
  selector: 'upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss'],
  providers: [UploadService, ThreeService, HelperService, ExampleProductService],
  directives: [LoaderComponent, ProductEditorComponent, ElementComponent]
})

我也重写了你的组件，因为我的编译器抱怨console.log：

import { Component, Input } from '@angular/core';

@Component({
    selector: 'element',
    template: `<p>{{skillType}}</p>`
})
export class ElementComponent {
  @Input() skillType: string;

  ngOnInit() {
    console.log(this.skillType);
  }
}

Answer 2

如果 tec 是字符串，则

<element skillType="'tec'"></element>

export class element {

    @Input() skillType: string;

    ngOnInit(){
       console.log(this.skillType);
    }
}

如果 tec 是表达式，

<element [skillType]="tec"></element>

export class element {

    @Input() skillType: string;

    ngOnInit(){
       console.log(this.skillType);
    }
}

angular 2如何从控制器获取被提取的数据

2 个答案: