Блог

У меня есть этот компонент:

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

Мне нужно получить skillType параметр в моем контроллере, я делаю это так:

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

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

В шаблоне я получаю текст tec , но в журнале, который я получаю undefined , я также пробовал с ngOnInit, но все равно получаю те же результаты.

есть мысли?

заранее спасибо!

Если 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);
    }
}
  

Я считаю, что это как-то связано с импортом вашего компонента в компонент, в котором вы его фактически используете, и с тем, как вы не ссылаетесь на переменную класса, используя this .

Например, чтобы использовать элемент component, скажем, в компоненте upload, вам нужно импортировать его, а затем добавить в массив directives следующим образом:

 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);
  }
}